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

Question

现在不明白为什么useSelector获取到的数据值是通过useEffect来监控的，并且使用useState来闭环渲染页面 这是我的代码：

  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;
    }
  });

  const [list, setList] = useState<DeviceDataOne[][]>([]);

  useEffect(() => {
    if (data !== null) {
      let arr = [];
      for (var i = 0; i < (data as DeviceDataOne[]).length; i += 4) {
        arr.push((data as DeviceDataOne[]).slice(i, i + 4));
      }
      setList(JSON.parse(JSON.stringify(arr)));
    } else {
      setList([]);
    }
  }, [data]);

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

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

我对useEffect监控的理解应该是当数据改变的时候，他会重新执行useEffect里的代码。然而我实际上发现这样的写法会导致无限的重新渲染。因此，我无法理解为什么会出现死循环。

我尝试注释中间的代码

  useEffect(() => {
    if (data !== null) {
      let arr = [];
      for (var i = 0; i < (data as DeviceDataOne[]).length; i += 4) {
        arr.push((data as DeviceDataOne[]).slice(i, i + 4));
      }
      setList(JSON.parse(JSON.stringify(arr)));
    } else {
      setList([]);
    }
  }, [data]);

但是我不明白为什么我不能这样写。我也不明白是什么导致了这样的问题。你能帮我解决这些问题吗？

Answer 1

我对useEffect监控的理解应该是当数据改变的时候，他会重新执行useEffect里的代码。

这是正确的，但是

data

is 正在更改：每次渲染组件时，

useSelector

函数都会返回一个新列表，并且在 JavaScript 中，两个列表不会仅仅因为它们当前包含相同的元素而被视为相等.

您的效果触发无限循环的原因是它每次都会更改

list

状态，从而触发新的渲染，从而更改

data

，从而再次触发该效果。