React usecallback 不遵守子函数引起的依赖关系更改

Question

希望有人能帮助我，我将非常感激。我搜索了之前回答过的问题，但找不到完全类似的东西。

简而言之：

我有一个 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, ])

Answer 1

问题可能是，React 使用“浅层”比较来检查状态中的某些内容是否发生变化。这意味着 React 不会进入您的数组并检查每个数组条目是否已更改。

因为你正在改变现有的数组，React不会注意到这些变化。相反，您应该创建一个新数组，例如使用扩展语法：

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

这样，因为您不是改变数组而是完全替换它，所以 React 应该注意到更改并触发重新渲染。另请检查这篇文章：React does not rerender on an array state update