const [resourceType, setResourceType] = useState("posts");
const [data, setData] = useState("");
useEffect(() => {
console.log("use effects called: " resourceType);
fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
.then((result) => {
return result.json().then((data) => {
return {
data: data,
response: result.status,
};
});
//JSON.parse(result);
})
.then((data) => {
console.log("here");
setData(JSON.stringify(data));
console.log(data);
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>我有上面的代碼從 JSON 占位符 URL 獲取虛擬資料，然后更新資料變數 (setData(JSON.stringify(data)))。我的問題是，根據我對 useEffect 和 useState react hook 的理解，這個實作應該進入一個無限回圈。這是我認為應該發生的情況，頁面渲染它呼叫 useEffect 它更新資料變數，這將導致組件重新渲染，該組件應該再次呼叫 useEffect 因此重新渲染組件并且回圈繼續。但這并沒有發生，并且 useEffect 只被呼叫了兩次。為什么會這樣？
uj5u.com熱心網友回復：
第二次呼叫的資料是一樣的setData，所以：
- react 不會重新渲染你的組件，所以
- 效果不運行，因此
- 沒有無限回圈。
如果您沒有對資料進行字串化，您可能會看到一個無限回圈。
uj5u.com熱心網友回復：
您需要將data物件作為依賴陣列傳遞給useEffect()
useEffect(() => {
...your code
}, [data]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457643.html
標籤：javascript 反应