url下面是從by獲取資料的代碼片段axios，
import React, { useState, setEffect, useEffect } from 'react';
import axios from "axios";
import LoadingPage from "./LoadingPage";
import Posts from "./Posts";
const url = "https://api-post*****";
function App() {
const [posts, setPosts] = useState([]);
const fetchPost = async() => {
try {
const response = await axios(url);
return response.data;
} catch (error) {
console.error(error);
}
};
let data = fetchPost();
setPosts(data);
return (
<main>
<div className="title">
<h2> Users Posts </h2>
{posts.length
? <Posts posts={posts} />
: <Loading posts={posts} />
}
</div>
</main>
);
}
export default App;
但是，它得到了錯誤
uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite
問題1：這怎么可能too many re-render，沒有回圈什么的？
為了解決這個錯誤，我們可以使用以下更改：
const [posts, setPosts] = useState([]);
const fetchPost = async () => {
try {
const response = await axios(url);
setPosts(response.data);
} catch (err) {
console.error(err);
}
};
useEffect(()=> {
fetchPost();
}, [posts])
問題2：如何useEffect避免呼叫過多的作業？
問題3：我總是將引擎蓋下的反應鉤子視為web socket通信等。如果是這樣的話？
uj5u.com熱心網友回復：
請先像這樣檢查您的狀態。
useEffect(()=> {
fetchPost();
}, [posts]);
uj5u.com熱心網友回復：
當您呼叫setPosts該組件時，該組件將再次渲染，并再次獲取資料，此時您使用資料設定狀態，強制進行新的渲染以獲取資料......等等。
通過使用useEffect，您可以獲取資料，并在組件首次使用空依賴陣列呈現時設定一次狀態。
useEffect(() => {
// Fetch the data
setposts(data);
}, []);
您可能不想像在更新的示例中那樣關注posts這個（ useEffect您可以有很多），因為您可能會遇到同樣的問題。
uj5u.com熱心網友回復：
我只會回答第一個。
警告：答案有點長。
我真的希望它能幫助你理解一個我花了很長時間才掌握的話題。
答案一：
要回答這個問題，我們應該問自己兩件事，a) 什么是副作用？b) 組件的生命周期如何運作？
所以，我們知道 React 函式式組件是純函式，它們應該保持這種狀態，你可以將 props 作為引數傳遞，函式會做一些事情并回傳 JSX，到目前為止一切都很好。
而對于第二部分，我們無法控制 React 虛擬 DOM，因此組件將在其生命周期內多次渲染，因此想象一下虛擬 DOM 決定檢查代碼并在虛擬 DOM 和真實 DOM 之間進行比較，為了做到這一點他將不得不檢查并“運行”駐留在該特定組件內的代碼。
虛擬 DOM 將運行 API 呼叫，他會發現一個不同的結果，這將導致對該特定組件進行新的渲染，并且這個程序將作為無限回圈繼續下去。
當您使用 usEffect 時，您可以控制此 API 呼叫何時發生，并且 useEffect 確保此 API 呼叫僅運行您的特定更改，而不是虛擬 DOM 與真實 DOM 更改。
總結一下，useEffect 基本上可以幫助你控制組件的 LifeCycle
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/480775.html
標籤：javascript 反应 插座 axios 钩
上一篇：如何從陣列中給定的字串中洗掉字符