在使用`useEffect`时更新状态，且依赖数组是一个Redux中的数组。

Question

我在Redux中有一个数组，并通过useSelector将其值存储到名为masterStatusOptions的变量中。现在，masterStatusOptions也是useEffect依赖数组的一部分。我在该useEffect中编写的逻辑会正确地更新状态变量。

当useEffect执行一次后，它会导致组件重新渲染，并且此时useSelector返回了相同的数组，但我想是因为内存地址发生了变化。因此useEffect再次被调用，由于状态改变导致了重新渲染，我的程序陷入了无限循环。我该如何解决这个问题？

const masterStatusOptions = lookupTypeData(useSelector((state) => state.lookup.lookup), 'user_status'); // 这将返回一个查找值数组
const [statusOptions, setStatusOptions] = useState();
useEffect(() => {
  if (masterStatusOptions?.length) {
    let masterArr = masterStatusOptions.filter((item) => item.priority !== 999);
    console.log(masterArr);
    setStatusOptions(masterArr); // 正是由于这一行触发了重新渲染，masterStatusOptions的值变成了新的内存地址，因为它返回的是一个数组，进而导致整个代码陷入无限循环。
  }
}, [masterStatusOptions])

// lookupTypeData函数代码：
export const lookupTypeData = (lookupData, type, idKey = "lookupId") => {
  console.log({ lookupData })
  if (lookupData?.length) {
    let filtered = [];
    for (let i = 0; i < lookupData.length; i++) {
      const item = lookupData[i];
      if (item.lookupType === type && lookupData[i].isActive && lookupData[i].isVisible) {
        const newItem = {
          ...item,
          value: item[idKey],
          label: item.lookupDisplayValue ? item.lookupDisplayValue : item.lookupValue,
          disabled: item.isDisabled
        };
        filtered.push(newItem);
      }
    }
    filtered.sort((x, y) => x.priority - y.priority);
    console.log({ filtered })
    return filtered;
  }
}

usr · Answer

您提供的代码似乎由于使用Redux store中的masterStatusOptions变量的方式而造成了无限循环的重新渲染。当你使用useSelector从Redux store获取数据时，每当store更新时，都会创建一个新的所选数据引用。这意味着每当Redux store更新时，组件内的masterStatusOptions变量都将拥有一个新的引用，这将导致useEffect反复运行，形成无限循环。

为了解决这个问题并防止无限循环发生，您可以尝试使用useMemo钩子来缓存masterStatusOptions变量，确保仅当其内部的实际数据发生变化时才更改它：

const masterStatusOptions = useSelector((state) => state.lookup.lookup); // 假设默认值为空数组

const statusOptions = useMemo(() => {
  return masterStatusOptions.filter((item) => item.priority !== 999);
}, [masterStatusOptions]);

Tim · Answer

存在因数组变化而引起的无限循环问题，但问题并不出在Redux中的数组，这个数组实际上是保持不变的。问题在于每次渲染时，您都会调用lookupTypeData函数，该函数会创建一个新的数组。您需要对该代码进行记忆化处理，以便仅当Redux中的数组发生变化时才创建新数组。例如：

const reduxArray = useSelector((state) => state.lookup.lookup);
const masterStatusOptions = useMemo(() => {
  return lookupTypeData(reduxArray, 'user_status');
}, [reduxArray]);

然后你可以保持useEffect不变：

useEffect(() => {
  if (masterStatusOptions?.length) {
    let masterArr = masterStatusOptions.filter((item) => item.priority !== 999);
    console.log(masterArr);
    setStatusOptions(masterArr);
  }
}, [masterStatusOptions]);

如果masterStatusOptions不在其他地方使用，你也可以选择将其移动到effect内部：

const reduxArray = useSelector((state) => state.lookup.lookup);
const [statusOptions, setStatusOptions] = useState();
useEffect(() => {
  const masterStatusOptions = lookupTypeData(reduxArray, "user_status");
  if (masterStatusOptions?.length) {
    let masterArr = masterStatusOptions.filter((item) => item.priority !== 999);
    console.log(masterArr);
    setStatusOptions(masterArr);
  }
}, [reduxArray]);