這個問題在這里已經有了答案： 深入反應 useEffect / useEffect 的使用？ (2 個回答) 13 小時前關閉。
我有以下代碼
const IssuesItems: React.FC<IProps> = function ({ issuesProp }) {
const [issues] = useState<any>([...issuesProp]);
const [paginatedIssues, setPaginatedIssues] = useState<any>([]);
const [currentPage, setCurrentPage] = useState<any>(1);
const [itemsPerPage, setItemsPerPage] = useState<any>(13);
const [numberOfPages, setNumberOfPages] = useState<any>(null);
useEffect(() => {
// set the number of pages
const numberOfPages = Math.ceil(issues.length / itemsPerPage);
console.log(numberOfPages);
setNumberOfPages(numberOfPages);
}, []);
useEffect(() => {
console.log(numberOfPages);
const newArr = splitArray(issues, numberOfPages);
console.log('new arr');
console.log(newArr);
}, [numberOfPages]);
問題是，第二個useEffect，是在load時觸發的，當numberOfPages為null時，不是應該只有在第一次觸發setNumberOfPages后才觸發嗎？
我可以修復它這樣做
useEffect(() => {
if (numberOfPages != null) {
const newArr = splitArray(issues, numberOfPages);
console.log('new arr');
console.log(newArr);
}
}, [numberOfPages]);
但是它應該只在 numberOfPages 狀態被 setNumberOfPages 呼叫修改后才被觸發嗎？
uj5u.com熱心網友回復：
默認情況下，useEffect總是在第一次渲染之后運行。
依賴陣列 inuseEffect允許您指定觸發它的條件。如果你提供useEffect一個空的依賴陣列，它只會運行一次。
如果您只想在第一次觸發 setNumberOfPages 后觸發，那么您使用它的方式是正確的：
useEffect(() => {
if (numberOfPages != null) {
const newArr = splitArray(issues, numberOfPages);
console.log('new arr');
console.log(newArr);
}
}, [numberOfPages]);
此外，您可以查看這個很棒的 StackOverflow 答案：https ://stackoverflow.com/a/59841947/16420018
以及 Dan Abramov 的這篇文章：https : //overreacted.io/a-complete-guide-to-useeffect/
uj5u.com熱心網友回復：
您擁有的 useEffect (2nd) 將在初始渲染上運行，然后在 numberOfPages 更改其值的每個后續渲染中運行。
問題是，第二個useEffect，是在load時觸發的，當numberOfPages為null時，不是應該只有在第一次觸發setNumberOfPages后才觸發嗎？
您無法逃脫初始渲染。但有條件地你可以讓它像你一樣什么都不做。useRef 也用于逃避初始渲染的效果。
uj5u.com熱心網友回復：
您只能在一個函式中使用一個 useEffect 您不能在一個組件中使用多個 useEffect。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362507.html
標籤：反应
下一篇：將專案添加到陣列后重置輸入欄位