![](/img/trans.png)
[英]React: useCallback - useCallback with empty dependency array VS not using useCallback at all
[英]React usecallback not honoring dependency change caused by child function
希望有人可以幫助我,我將不勝感激。 我搜索了以前回答過的問題,但找不到完全像這樣的東西。
簡而言之:
我有一個 useCallback 反應掛鈎,它呈現一組按鈕。 單擊其中一個按鈕時,我需要重新呈現整個功能以反映所需的更改。 據我所知,我擁有實現此目標所需的所有依賴項,但它正在發生。 當我通過其他操作觸發重新渲染時,更新就在那里。
這個主要的回調函數在基礎渲染中被調用。 單擊呈現的按鈕不會導致它重新呈現。 是什么賦予了??
const [pendingArticles, setPendingArticles] = useState([]);
const [persons, setPersons] = useState([]);
const renderArticlePieces = useCallback(() => {
const selectedArticle = pendingArticles.find(article => article.selected);
function assignArticlePieceToPerson(pieceId) {
console.log(pendingArticles);
const selectedArticleIndex = _.findIndex(pendingArticles, { selected: true });
pendingArticles[selectedArticleIndex].json_content[pieceId].speaker = selectedPerson.id;
setPendingArticles(pendingArticles);
}
function renderPersonAssignmentButtons(pieceId) {
const currentPiece = pendingArticles.find(article => article.selected).json_content[pieceId];
if (currentPiece.speaker) {
return 'Assigned'
}
return personsAvailableToAssign.map((person, dex) => {
return (
<Button key={dex} onClick={() => assignArticlePieceToPerson(pieceId)}>{`${person.first_name} ${person.last_name}`}</Button>
)
}).concat(
<Button key={personsAvailableToAssign.length + 1}>Other</Button>
)
}
return selectedArticle?.json_content.map((item, dex) => {
return (
<div key={dex} style={{ backgroundColor: "#c7c7c7", borderRadius: "5px", padding: "5px", margin: "5px" }}>
<div>
Assign to:
{renderPersonAssignmentButtons(dex)}
</div>
<div>{item.content}</div>
</div>
)
})
}, [pendingArticles, setPendingArticles, personsAvailableToAssign, selectedPerson, ])
問題可能是,React 使用“淺”比較來檢查狀態中的某些內容是否發生了變化。 這意味着 React 不會進入您的數組並檢查每個數組條目是否已更改。
因為你正在改變你現有的數組,React 不會注意到這些變化。 相反,您應該創建一個新數組,例如使用擴展語法:
let new_pending_articles = [...pendingArticles];
new_pending_articles[selectedArticleIndex].json_content[pieceId].speaker = selectedPerson.id;
setPendingArticles(new_pending_articles);
這樣,因為你不是在改變數組而是完全替換它,React 應該注意到變化並觸發重新渲染。 還要檢查這篇文章: React doesn't rerender on an array state update
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.