我對 ReactJS 開發人員很陌生，今天我正在嘗試使用 Axios 從 API 獲取一些資料。我的問題是：
- 我正在嘗試打開 map 函式
resultData以獲取我想要的內容，但是出現了錯誤并顯示：resultData.map is not a function - 如果我對這部分代碼進行注釋并先渲染頁面，然后取消注釋，它就可以作業并顯示資料。
我假設在渲染程序結束之前沒有加載資料，所以這就是我得到這個的原因。但是如何讓它加載之前？
這是我的代碼片段：
import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
const Url = "someAPi";
function App() {
const [baseData, setBaseData] = useState({});
const [resultData, setResultData] = useState({});
useEffect(() => {
getBaseDataWithAxios();
}, []);
const getBaseDataWithAxios = async () => {
const response = await axios.get(Url);
setBaseData(response.data);
};
useEffect(() => {
getResultDataWithAxios();
}, []);
const getResultDataWithAxios = async () => {
const response = await axios.get(Url);
setResultData(response.data.result);
};
const listItems =
resultData.map((d) => <li key={d.value}>{d.value}</li>);
return (
<div className="App">
<header className="App-header">
<h2>generated fees</h2>
</header>
<div className="info-container">
<h5 className="info-item">{baseData.status}</h5>
<h5 className="info-item">{baseData.message}</h5>
<h5 className="info-item">{listItems[1]}</h5>
</div>
</div>
);
}
export default App;
錯誤被拋出：
const listItems =
resultData.map((d) => <li key={d.value}>{d.value}</li>);
我知道我的資料可以被讀取，因為如果我listItems在回傳中注釋和顯示部分，呈現頁面，取消注釋所有內容，它會正確顯示資料。
有人可以向我解釋如何首先填充資料嗎？在我的研究中，我發現使用 Axios 可以實作這一點。
非常感謝 ！
uj5u.com熱心網友回復：
該useEffect鉤子始終在您的組件函式在渲染周期中回傳后運行。
嘗試使用空陣列作為初始值resultData而不是空物件：
const [resultData, setResultData] = useState([]);
map非陣列物件沒有內置方法，因此在第一次執行期間，您會收到該錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/367828.html