在 useEffect 依賴數組中使用 Redux state 時如何避免無限循環？

Question

我試圖弄清楚為什么我的 useEffect function 最終陷入無限循環。 我有兩個變量連接到我的 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 state 的操作。

getFormattedVehicleListForDisplay function：

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 function：

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 state 時會進入無限循環嗎？ 在依賴數組中使用 Redux state 有不同的方法嗎？ 謝謝！

Answer 1

使用時

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

每次觸發時，如果您的商店中沒有vehicles ，則返回一個新的 object {} 。 和{} === {} // false

所以在你的useEffect依賴數組中，每次都是一個新的Object，所以觸發了useEffect。

所以要么刪除你的|| {} || {}在您的選擇器中（因為null === null & undefined === undefined ）或考慮按照Z1FFA815C34D64D742AB00D7346213902 文檔中的說明移至useShallowSelector