Question

我正在编写代码块以使用React挂钩对一些数据进行排序。但是我得到上面提到的警告/错误，下面是我的代码。

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调用？

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

Answer 2

setState导致组件重新渲染；然后重新渲染再次运行setState-无限循环；在功能组件中，必须使用useEffect来解决此问题；

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

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

Answer 3

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

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

3 个答案: