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

作为参考，车辆和财产中的数据是一组键值对，其中密钥是给定账号的唯一标识符，值是该账号的车辆/财产对象数组。

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

Answer 1

使用时

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

每次触发此操作时，如果存储中没有vehicles，则返回一个新对象{}。和{} === {} // false

在你的useEffect依赖数组中，每次都会有一个新的Object，所以useEffect会被触发。

因此，在选择器中删除|| {}(因为null === null&undefined === undefined(，或者考虑移动到useShallowSelector，如react redux文档中所述