我是 ReactJS 的新手，我現在正在嘗試做一個互動式評論部分（取自 frontendmentor.io），但 App 組件只是沒有顯示它應該顯示的內容
這是我的App組件：
function App() {
const [data, setData] = useState([]);
useEffect(() => {
const getComm = async () => {
await fetchData();
};
getComm();
}, []);
console.log(data);
const fetchData = async () => {
const res = await fetch("db.json").then(async function (response) {
const comm = await response.json();
setData(comm);
return comm;
});
};
return (
<Fragment>
{data.length > 0 ? <Comments data={data} /> : "No Comments to Show"}
</Fragment>
);
}
export default App;
該console.log(data)記錄兩次：
- 第一次是空陣列；
- 第二次是里面有我的資料的陣列。
如下：
如果我強制App列印Comments它只是說無法映射未定義的變數
這是我的Comments組件：
function Comments({ data }) {
return (
<div>
{data.map((c) => (
<Comment key={c.id} />
))}
</div>
);
}
export default Comments;
我想知道為什么即使日志正確，頁面仍然顯示No Comments to Show
uj5u.com熱心網友回復：
你的初始狀態data是一個陣列。
從回應中獲取資料后，您將獲得一個物件。更改狀態型別不是一個好習慣。您應該將data狀態保留為陣列或物件。
考慮到您將其保留為陣列，您需要在setData. 前任。
comm && Array.isArray(comm.comments) && setData(comm.comments);
至于你的Comments組件，你應該考慮期待一個陣列而不是一個物件。
前任。
function Comments(data) {
return (
<div>
{data.map((c) => (
<Comment key={c.id} />
))}
</div>
);
}
export default Comments;
uj5u.com熱心網友回復：
@Cristian-Irimiea 對 fetch 的回應有正確的看法。回應是一個物件，不能迭代。您需要將comments來自回應的狀態存盤在狀態
但是您有多個錯誤：
- 看看如何使用異步函式。你的功能
fetchData看起來很糟糕。
// Your function
const fetchData = async () => {
const res = await fetch("db.json").then(async function (response) {
const comm = await response.json();
setData(comm);
return comm;
});
};
// How can refactor
// fetchData function have responsibility to only fetch data and return a json
const fetchData = async () => {
const response = await fetch("./db.json");
const body = await response.json();
return body;
};
- 您正在 fetch 函式中更新狀態，但一個好的解決方案是更新狀態然后承諾解決：
useEffect(() => {
// here we use .then to get promise response and update state
fetchData().then((response) => setData(response.comments));
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/404458.html
標籤：
下一篇：不需要的異步復位