React useCallback未响应依赖变更问题求助

核心问题 #

你遇到的问题根源在于直接修改了React State的引用类型数据，且未传递新引用给setState。React通过浅比较引用变化判断是否重渲染，当你直接修改pendingArticles数组内的对象，再把原数组传给setPendingArticles时，数组引用未变，React会判定状态无更新，因此不触发重渲染。

代码问题点 #

在assignArticlePieceToPerson函数中，你直接修改了原state的内部元素：

pendingArticles[selectedArticleIndex].json_content[pieceId].speaker = selectedPerson.id;
setPendingArticles(pendingArticles);

这里pendingArticles仍是原数组引用，React浅比较后认为状态未变，自然不会重渲染。

修复方案 #

修改assignArticlePieceToPerson函数，通过不可变更新创建新的数组和对象，确保传给setPendingArticles的是新引用：

function assignArticlePieceToPerson(pieceId) {
  setPendingArticles(prevArticles => {
    const selectedArticleIndex = _.findIndex(prevArticles, { selected: true });
    // 逐层复制，避免修改原state
    const newArticles = [...prevArticles];
    const updatedArticle = { ...newArticles[selectedArticleIndex] };
    updatedArticle.json_content = [...updatedArticle.json_content];
    updatedArticle.json_content[pieceId] = {
      ...updatedArticle.json_content[pieceId],
      speaker: selectedPerson.id
    };
    newArticles[selectedArticleIndex] = updatedArticle;
    return newArticles;
  });
}

关键说明 #

• 使用函数式更新（接收prevArticles参数），确保获取最新state值，避免闭包导致的旧state问题
• 逐层复制数组和对象，保证每一层都是新引用，彻底杜绝直接修改原state的操作
• 返回新数组后，React检测到引用变化，就会触发组件重渲染

额外优化建议 #

• 不要在useCallback里写渲染逻辑：renderArticlePieces属于渲染代码，建议直接写在组件JSX中或抽成独立组件，减少useCallback的依赖管理复杂度
• 优化key值：渲染按钮时用person.id代替索引dex做key，数组变化时React能更高效更新DOM
• 简化重复逻辑：pendingArticles.find(article => article.selected)重复出现，可在函数开头提取一次，避免重复计算

内容的提问来源于stack exchange，提问作者Jason Ross