React - 如何在 useEffect 中更新 state 而不会导致无限循环？

Question

我正在尝试按优先级对我的 object 进行排序，但是它得到关于项目也应该在依赖数组中的依赖错误。 但是，如果我把它放在那里，那么它就是永无止境的循环。 如何在保留整个功能的情况下使错误消失？

useEffect(() => {
  const sortItems = () => {
    const res = items.sort((a, b) => (priority > priority ? 1 : -1));
    setItems(res);
  };
  if (sortedProperty) {
    sortItems();
  }
}, [sortedProperty]);

Answer 1

永无止境的循环是因为将items添加到依赖项将触发useEffect每当调用setItems时发生的items更改。

这可以通过使用功能 state 更新轻松解决：

useEffect(() => {
    const sortItems = (itemsArr) => {
      // maybe these should be a.priority, b.priority   
      return itemsArr.sort((a, b) => (priority > priority ? 1 : -1));
    };

    if (sortedProperty) {
        // updating state by passing a callback
        setItems(previousItems => sortItems(previousItems));
    }
  }, [sortedProperty]);