渲染次数过多。React 限制渲染次数以防止无限循环 - React hooks。

Question

我正在使用React hooks编写代码块对一些数据进行排序，但是我遇到了上述警告/错误。以下是我的代码:

const [sort, setSort] = useState(sortedInfo)

if (condition){
 // some logic
} else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
 const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
 setSort(data);
}

我的else情况被调用了很多次，这符合条件。有什么方法可以使setSort调用最小化吗？

- iCodeByte

---

更改您的“条件”或“else if”测试，以便它不会如此频繁地运行？很难在没有更多代码上下文和没有描述您正在寻找的逻辑的情况下说。 - CertainPerformance

不要在函数组件的主体中直接调用 setSort()。根据我所看到的，您可能想将该逻辑移动到 useEffect() 回调中。 - Patrick Roberts

Answer 1

在渲染中调用setSort()会触发太多的渲染，使用useEffect钩子在值改变时触发更改。

useEffect(() => {
  if (condition){
    // some logic
  } else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
    const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
    setSort(data);
  }
}, [condition]); // Only re-run the effect if condition changes

- Nagesh Sanika

---

可能还需要在依赖项列表中加入“columns”。 - Patrick Roberts

Answer 2

setState会导致组件重新渲染，而重新渲染又会再次运行setState - 无限循环； 在函数组件中，必须使用useEffect来解决这个问题；

useEffect(() => {
   setSort(data)
}, [condition])

setSort() 导致重新渲染，然后（如果条件没有更改）useEffect() 确保 setSort(data) 不会再次运行。

- Robin Jiao

Answer 3

setSort 会调用重新渲染。因此，它会调用 If 条件。您应该在函数调用或 useEffect 中使用 if 条件的逻辑。

- Viet Dinh