在useEffect中更新状态，依赖数组是redux的值，它是一个数组

Question

我有一个 redux 数组。我通过 useSelector 将其值存储在名为 masterStatusOptions 的变量中。 现在masterStatusOptions也是我的useEffect的依赖数组之一。 我在该使用效果中编写的逻辑是更新状态变量，这是正确的。 当 use Effect 执行 1 次时，它会重新渲染我的组件，现在 useSelector 返回相同的数组，但我认为内存位置发生了变化。这就是为什么再次调用 useEffect 的原因，并且由于状态更改而重新渲染，我的程序进入无限循环。我该如何解决这个问题？

const masterStatusOptions = lookupTypeData(useSelector((state) => state.lookup.lookup), 'user_status'); // This returns an array of lookup values
  const [statusOptions, setStatusOptions] = useState();
  useEffect(()=>{
    if(masterStatusOptions?.length){
      let masterArr = masterStatusOptions.filter((item) => item.priority !== 999);
      console.log(masterArr);
      setStatusOptions(masterArr); // Due to this rerender is triggered and masterStatusOptions value becomes a new memory address since it is returning an array and the whole code goes into infinite loop.
    }
  },[masterStatusOptions])

Answer 1

statusOptions

不应该是它自己的状态，因为它可以直接从其他值计算出来。作为一个令人高兴的副作用，这将修复您的错误，因为它完全删除了 useEffect：

const masterStatusOptions = lookupTypeData(useSelector((state) => state.lookup.lookup), 'user_status');
let statusOptions;
if (masterStatusOptions?.length) {
  statusOptions = masterStatusOptions.filter((item) => item.priority !== 999)
}

这种方法编写起来更简单，不会因双重渲染而导致性能损失，并且 statusOptions 和 masterStatusOptions 永远不会不同步，即使是短暂的不同步。

如果过滤数组是一个性能问题，您可以将其放在

useMemo

中，这样您就不会重复计算，直到数组发生变化：

const masterStatusOptions = lookupTypeData(useSelector((state) => state.lookup.lookup), 'user_status');
let statusOptions = useMemo(() => {
  if (masterStatusOptions?.length) {
     return masterStatusOptions.filter((item) => item.priority !== 999)
  } else {
    return undefined
  }
}, [masterStatusOptions]);