這個問題在這里已經有了答案： 為什么我的渲染方法被呼叫了兩次 3 個答案 7 小時前關閉。
我有這個使用承諾的代碼，但我的問題是當我 console.log 列印它兩次的回應時，為什么會這樣？誰能指出我正確的方向？提前致謝！
import "./App.css";
import { useState } from "react";
function App() {
const [data, setData] = useState([]);
let itemsApi = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve([
{ grupoId: 1, name: "test1" },
{ grupoId: 2, name: "test2" },
{ grupoId: 1, name: "test3" }
]);
}, 500);
});
itemsApi
.then((res) => {
console.log(res); // This gets call 2 times, why??
})
.catch((error) => {});
return <div>test</div>;
}
export default App;
uj5u.com熱心網友回復：
React 可以隨意多次呼叫你的組件函式（實際上，在嚴格模式下，它通常會呼叫它兩次，以確保你不會做有副作用的壞事——就像你現在所做的那樣）。
這是一個如何使用useEffect.
loadData 這只是一個模擬函式，它需要 500 毫秒才能回傳資料，但也可以是其他任何東西。
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function loadItems() {
const data = [
{ grupoId: 1, name: "test1" },
{ grupoId: 2, name: "test2" },
{ grupoId: 1, name: "test3" },
{ grupoId: 1, name: "test4" },
{ grupoId: 3, name: "test5" },
{ grupoId: 2, name: "test6" },
];
await delay(500);
return data;
}
function App() {
const [data, setData] = useState([]);
React.useEffect(() => {
loadItems().then(setData);
}, []); // <- empty dependency array has this effect only run once
return <div>{JSON.stringify(data)}</div>;
}
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414878.html
標籤：
上一篇：將訊息放入下拉串列中以做出反應