在 useEffect 依赖数组中使用 Redux 状态时如何避免无限循环？

Question

我想弄清楚为什么我的 useEffect 函数会陷入无限循环。我有两个变量挂接到我的 Redux 存储中：

const vehicles: AllVehiclesCollection = useSelector((state: ReduxState) => state.claims?.vehicles ?? {});
const properties: AllPropertiesCollection = useSelector((state: ReduxState) => state.claims?.properties ?? {});

并且我有一个操作被发送到商店，只有在用户点击按钮后才会更新这些。

我有一个 useEffect 会根据这些变量中的任何一个发生变化而触发。

useEffect(() => {
    let fullVehicleList: DropdownData[] = getFormattedVehicleListForDisplay();
    let fullPropertyList: DropdownData[] = getFormattedPropertyListForDisplay();
    let fullList = fullVehicleList.concat(fullPropertyList);
    if (fullList.length > 0) {
      setVehiclesAndPropertiesList(fullList);
    } else {
      setVehiclesAndPropertiesList(null);
    }
  }, [vehicles, properties]);

此代码中的任何地方都没有更改车辆或属性变量，也没有发送任何会更改 Redux 状态的操作。

getFormattedVehicleListForDisplay 函数：

const getFormattedVehicleListForDisplay = () => {
    let list: DropdownData[] = [];
    if (Object.keys(vehicles).length > 0) {
      let thisPolicysVehicles = [];
      if (vehicles !== null) {
        const key = `${selectedPolicy.symbol}${selectedPolicy.number}`;
        thisPolicysVehicles = vehicles[key];
      }
      if (thisPolicysVehicles && thisPolicysVehicles.length > 0) {
        thisPolicysVehicles.forEach((vehicle: VehicleInformation) => {
          if (vehicle.vehicleMake !== OTHER_VEHICLE) {
            list.push({
              label: formatVehicleForDisplay(vehicle),
              value: { ...vehicle, type: 'V' },
            });
          } else {
            list.push({ label: vehicle.vehicleMake, value: {} });
          }
        });
      }
    }
    return list;
  };

getFormattedPropertyListForDisplay 函数：

const getFormattedPropertyListForDisplay = () => {
    let list: DropdownDataOMIG[] = [];
    if (Object.keys(properties).length > 0) {
      let thisPolicysProperties = [];
      if (properties !== null) {
        const key = `${selectedPolicy.symbol}${selectedPolicy.number}`;
        thisPolicysProperties = properties[key];
      }
      if (thisPolicysProperties && thisPolicysProperties.length > 0) {
        thisPolicysProperties.forEach((property: LocationInformation) => {
          if (property.locStreet1 !== OTHER_PROP) {
            list.push({
              label: formatPropertyForDisplay(property),
              value: { ...property, type: 'P' },
            });
          } else {
            list.push({ label: property.locStreet1, value: {} });
          }
        });
      }
    }
    return list;
  };

作为参考，vehicles 和 properties 中的数据是一组键值对，其中键是给定帐号的唯一标识符，值是该帐户的 vehicle/property 个对象的数组.

知道为什么在依赖项数组中使用 Redux 状态时会进入无限循环吗？在依赖项数组中使用 Redux 状态有不同的方法吗？谢谢！

Answer 1

使用时

const vehicles = useSelector((state: ReduxState) => state.claims?.vehicles ?? {});

每次触发，并且您的商店中没有 vehicles，您 return 一个 new 对象 {} .和 {} === {} // false

所以在你的 useEffect 依赖数组中，每次都是一个新的对象，所以 useEffect 被触发。

因此，要么删除选择器中的 || {}（因为 null === null 和 undefined === undefined），要么考虑移至 useShallowSelector，如 react-redux documentation[= 中所述20=]

在 useEffect 依赖数组中使用 Redux 状态时如何避免无限循环？

How do I avoid infinite loop when using Redux state in useEffect dependency array?

javascript

infinite-loop

reactjs

redux

use-effect