你沒有對你給出的代碼中的響應做任何事情，你需要在得到響應后設置data狀態。 const getData= ()=>{ fetch('http://localhost:8070/foo') .then(function(response){ console.log(response) return response.json(); }) .then(function(myJson){ console.log(myJson); setData(myJson) // <-- important line here }) } 我建議閱讀關于useState的教程

您可以在第一次渲染中使用效果掛鉤添加60*5*1000時間的setInterval。卸載組件時需要清除setInterval。 const ref = useRef(null)useEffect(() => { ref.current = setInterval(yourFunction, 5 * 60 * 1000); return () => { if(ref.current){ clearInterval(ref.current) } }}, [])

您應該能夠創建多個承諾并將其放入一個數組中，然后使用Promise.all一起解決所有承諾。 Keep in mind that Promise.all rejects as soon as any of those promises is rejected with the first error message. Example: const promise1 = fetchServiceData();const promise2 = fetchServiceData();Promise.all([promise1, promise2]).then(response => { const promise1Response = response[0]; const promise2Response = response[1]; // Do something with these responses.}).catch(err => { // Do something with the error});

當您想要從子組件返回一些值時，可以將函數傳遞給子組件。就你而言： 在UserCard組件中定義回調function，并使用卡中的回調函數數據： import React from "react"import { NavLink } from "react-router-dom"import UserForm from "./UserForm"const UserCard = (props) =>{ const[user, setUser] = useState(""); const[login, setLogin] = useState(""); const giveBackDataToCard = (login , user) => { setLogin(login); setUser(user); } return( <div className = "Card"> <UserForm /> <h1>Hello, {login}</h1> <h2>How is the weather in {user.location}?</h2> <h3>Here's a little about you </h3> <p>{user.bio}</p> <

在我看來，在DOM中打電話是不好的做法。 我會創建一個數組來存儲包含完整信息的電影，然后運行for-each循環來檢查從第一次調用開始的每一部電影，并對其運行第二次調用以獲取更多信息，并將結果附加到開始創建的數組中。 然后將這個數組映射到DOM中的movie元素。 然而，如果您不想更改調用，您可以as-well包含初始調用的所有信息，以避免對API進行多次調用。 希望這有幫助。 編輯：作為對你評論的回應，我不確定你使用的API是如何工作的。但是，如果您想循環，可以執行以下操作： const movies = getAllMovies() // run the api call to get the movieslet fullInfoMovies = [];movies.forEach((movie) => { const fullInfo = getMovieInfo(movie.id); // Run the call to get your movie info of the ID of the movie currently being ran and assign it to a variable for use. fullInfoMovies.push(fullInfo);}); 正如我所說，我沒有使用您正在使用的API，但這應該可以幫助您了解如何構建使用API的

公平地說，如果您知道API總有5個頁面，并且它不會阻止多個請求，那么我將按以下方式執行： export default function SomeComponent(){ useEffect(() => { (async () => { try { let promises = []; new Array(5).forEach(page => { let promise = new Promise(async (resolve, reject) => { try { let response = await fetch('your url'); let json = await response.json(); if(response.status !== 200) reject("ERR: " + response.status) resolve(json) }catch(err){ reject(err.message) } }) promises.push(promise) }) let results = await Promise.all(promises) //here you have all 5000 rows unless a request fails }catch(err){ //handle the error } })() }, [

實際上，每次呈現組件時都會執行API調用，因為它們位于函數體中。React組件只是普通的舊函數，因此每次React呈現組件時（閱讀：每次React調用您的函數時），您的組件將運行所有API調用，而不管參數的狀態如何。那太糟糕了！至少，您應該將API調用包裝在useEffect中，并在從API獲取之前測試您是否已經擁有所需的參數： // this is pseudocode, hopefully you get the idea React.useEffect(() => { if (dbParameters) { // do your fetching }}, [dbParameters]); 您至少有點熟悉這個概念，因為您已經為db參數做過了！ 我強烈建議您多讀幾遍這篇文章，它是處理useEffect和獲取數據時非常寶貴的資源。

您沒有將任何依賴項傳遞給useEffect數組，這會導致它在每個渲染器上運行。由于您在API調用后更新了狀態，所以它將繼續re-render，然后re-fetch數據。而是傳遞一個空的依賴項數組，它告訴它只運行一次，而不運行re-run，除非組件re-mounts完全運行。 useEffect(() => { GetStockData(); GetCompanyData();}, []);

您的前端代碼在默認情況下是不安全的和可觀察的。前端沒有秘密。如果您的API返回的機密數據只能由適當的用戶訪問，那么您將必須實現任何類型的身份驗證。 例如，用戶會提供一個密碼來調用API，或者他在登錄之前就得到了一個令牌（例如JWT），他在每次請求進行身份驗證時都會發送該令牌。每個請求都有一個用戶標識，您的后端可以決定是否允許用戶獲取該私鑰。 如果你真的想讓別人很難看到你的前端代碼，你的路由器可能會提供一個類似“保護路由”的功能，它需要這樣的令牌才能訪問應用程序的某些路由。仍然可以獲得前端代碼，因為業務邏輯必須留在后端。

是的，確切地說，這是一個獲取，所以你必須等待結果，然后才設置狀態，這樣你就可以像這樣做smth： componentDidMount() { getTime('Europe/London') .then((response) => this.setState({ london: response });}

您有一個無限循環：從回調中的括號中刪除參數“discharge”。 useEffect(() => { getDischargeData(); async function getDischargeData() { const response = await axios.get("https://waterservices.usgs.gov/nwis/dv/?format=json&indent=on&parameterCd=00060&statCd=00003&sites=14211820,%2014144700,%2014211315,%2014206900,%2014211550" ); setDischargeData(response.data); console.log(response.data); } }, []) ^

Second answer 這是失敗的，因為在你的方法中，你已經返回了天氣： // ... const forecast = await fetchWeatherData(); const expect(forecast).toEqual('Sunny'); // ... Previous answer 您所做的已經是正確的，但是您沒有創建稍后訪問的對象結構： import axios from 'axios';import { fetchWeatherData } from '../../__mocks__/WeatherMocks';jest.mock('axios');const mockedAxios = axios as jest.Mocked<typeof axios>;describe('mock api calls', () => { afterEach(() => { jest.resetAllMocks(); }); test('return forcast Sunny', async () => { mockedAxios.get.mockResolvedValue({ // You need to mock all the structure: // response -> data -> result ->

每次呈現時都會調用Api。你只需要一個useEffect鉤子才能執行一次。 任意函數，在本例中，發送到component的匿名函數不是React Functional Component。要使其成為組件，需要1。一個命名函數和2。此命名函數的首字母為doc 要使代碼正常工作，您需要定義要呈現的組件，只有這樣才能調用useEffect。 下面是一個簡單的例子，其中有些道具/變量缺失，因為我不確定您是如何以及從何處獲得這些道具/變量的： 您的新組件： const Wallet = ({ history }) => { useEffect(() => { axios .get(`http://website/apis/save_ride_payments?payment_type=WALLET`) .then((saveRides) => { return axios.post(`http://website/apis/verify_token?token=${usertoken}`); }).then((response) => { if (response.data.status !== 'error') { history.push({ pathname: '/paymentsuccess', state: { initRide }, }); } }); }

通常，如果您想執行一次，比如在加載頁面時從api中提取一些內容，那么應該使用useEffect鉤子和空的依賴項數組，如下所示： React.useEffect( () => { fetch('https://localhost:44386/weatherforecast') .then(response => response.text()) .then(data => console.log(data)); }, []) // <--- empty dependency array 編輯：這也可能是由<StrictMode>引起的。它的目的是使React在開發模式下呈現兩次，以便為您提供如何改進代碼和掛鉤使用的建議。這可能就是你的應用程序渲染兩次的原因！

setLoading在所有承諾都已解決時應設置為false，因為存在嵌套請求，我已更新并測試了解決方案 Updated code useEffect(() => { fetch("https://statsapi.web.nhl.com/api/v1/teams") .then((teamsResponse) => teamsResponse.json()) .then((teamsData) => { const teams = teamsData.teams; let arr = []; const allRosterData = teams.map(async (team) => { const rosterData = await fetch( "https://statsapi.web.nhl.com/api/v1/teams/" + team.id + "/roster" ) .then((teamResponse) => teamResponse.json()) .then((teamData) => { const dt = []; const roster = teamData.roster; roster.forEach((player) => { dt.push(player); }); return dt; });