Reactjs UseEffect和useSelector的奇怪问题导致无限循环

我对useEffect监控的理解应该是，当 数据被更改时，他将在useEffect中重新执行代码.

您对useEffect挂钩的理解是正确的，但您没有理解useSelector挂钩可能会在组件每次呈现时返回一个新的数组对象引用.换句话说，data是触发useEffect挂钩运行的新引用.useEffect挂钩将list状态更新入队.当React处理list状态更新时，它触发组件重现器.data是从Redux存储中 Select 和计算的.重复令人作呕的话.

您可以通过将相等函数与useSelector挂钩一起使用来帮助打破循环.请参见Equality Comparisons and Updates.

import { shallowEqual, useSelector } from 'react-redux';

...

const data = useSelector((state: DeviceList) => {
  if (state.basicSetting !== null) {
    return state.basicSetting.filter(
      item =>
        item.deviceName.includes('ac') &&
        !item.deviceName.includes('bz'),
    );
  } else {
    return null;
  }
}, shallowEqual); // <-- shallow equality instead of strict equality

另一个很好的解决方案是从Reselect创建一个有记忆的 Select 器函数，由于您使用的是Redux-Toolkit，因此createSelector将从Reselect中重新导出.(Reselect is maintained by the same Redux/Redux-Toolkit developers)

它允许您写入相同的计算data值，但它会记录结果，因此如果 Select 器的选定状态为into，则 Select 器返回相同的先前计算值.换句话说，它提供了一个稳定的返回data值，只有在状态实际更新并且 Select 器计算新的值引用时才会触发useEffect.

然而，您从存储中 Select STATE并在本地将其复制到STATE中是不太清楚的.这通常被认为是一种react 反模式.您可以直接从store 计算list的值.

示例:

const list = useSelector((state: DeviceList) => {
  if (state.basicSetting === null) {
    return null;
  }
  
  const data = state.basicSetting.filter(
    item =>
      item.deviceName.includes('ac') &&
      !item.deviceName.includes('bz'),
  ) as DeviceDataOne[];

  const list: DeviceDataOne[] = [];
  while (data.length) {
    list.push(data.splice(0, 4));
  }
  return list;
});

useEffect(() => {
  console.log('list', list);
}, [list]);