react 18 useState 和 useEffect 重新渲染

Question

告诉我为什么在用户状态更改后页面上的重新呈现不起作用再次单击页面后会发生变化，而不是立即发生变化。

  useEffect(() => {
    const sortfdb = Datadb.sort((a,b) => b.count - a.count);
    console.log(sortfdb)
    setDatadb(sortfdb);
    console.log(Datadb)
  },[Datadb])

我在页面上有一个字段，我会添加一个数字，它写入useState([])，当改变useState时，它应该对它们进行排序。但这并没有发生。只有当我添加一个新号码时才会发生这种情况。

useEffect，它捕获更改、工作并按应有的方式在控制台中显示所有内容，但不想立即在页面上更改它它在 React 17 中运行良好，但现在不行。我不知道出了什么问题

更新

我意识到我的错误，我必须提供数组排序

setDatadb(el=>[...el].sort((a,b) => b.count - a.count));

但现在它会无限期地抛出错误，因为渲染一直在发生

next-dev.js?3515:25 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Answer 1

设置状态为async，当console.log(Datadb)执行时，setDatadb(sortfdb)尚未完成。即使在 React 18 之前，这也是预期的行为。但是，状态会改变，你不能控制台记录它，因为它是异步的...

Answer 2

错误是sort没有提供数组，解决方法如下：

setDatadb(el=>[...el].sort((a,b) => b.count - a.count));

我去掉了useEffect的check，添加了一个新变量后立即移动了

在 useEffect 中不再有无限循环，最重要的是，在添加新变量后，它会对值进行排序

Answer 3

next-dev.js?3515:25 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

不应该在 useEffect 中更新状态值。您必须在外部创建一个函数并更新状态值。

发生这种情况是因为一旦您更新状态，状态的引用将被更改并且组件会重新渲染。由于引用已更改，因此再次出现。 useEffect 将被再次调用，这种情况会无限发生，vue 在一定程度上停止。

react 18 useState 和 useEffect 重新渲染

react 18 useState and useEffect re-rendering

reactjs

react-hooks

更新