Redux 状态管理中处理嵌套对象数组 undefined 错误的策略_技术教程

本文旨在解决 redux 状态管理中，尝试向未初始化的嵌套对象数组添加元素时出现的 `typeerror: cannot read properties of undefined (reading 'push')` 错误。文章将深入分析问题根源，并提供两种解决方案：一种是即时在 reducer 中进行条件性初始化，另一种是更推荐的最佳实践，即在对象创建时就预先初始化嵌套数组，从而确保状态结构的健壮性和一致性，避免运行时错误。

在构建复杂的 React 应用时，Redux 常常被用于管理全局状态。当状态结构涉及多层嵌套的对象和数组时，我们可能会遇到一个常见的 TypeError: Cannot read properties of undefined (reading 'push') 错误。这个错误通常发生在尝试向一个实际上还未被定义或初始化的数组添加元素时。

问题场景分析

假设我们有一个 Redux 状态，其中包含一个世界对象，世界对象中有一个国家数组，每个国家对象又包含一个城市数组。当我们在前端界面创建了一个国家后，立即尝试为该国家添加城市时，可能会遇到上述 TypeError。

以下是导致问题的 Redux slice reducer 片段：

addCityToCreatedWorld: (state, action) => {
  const { countryPk, newCity } = action.payload;
  // 查找对应的国家
  const countryIndex = state.createdWorld.countries.findIndex(
    (country) => country.pk === countryPk
  );
  if (countryIndex >= 0) {
    // 尝试向 country.cities 数组中 push 新城市
    // 如果 country.cities 此时是 undefined，就会报错
    state.createdWorld.countries[countryIndex].cities.push(newCity);
  }
}

以及对应的 React 组件中的事件处理逻辑：

const handleCitySubmit = async (event) => {
  event.preventDefault();

  const data = {};
  data.name = cityName;
  data.picture = cityPicture;
  data.description = cityDescription;
  data.country = countryData.pk; // 关联到国家

  let cityUrl = `${process.env.REACT_APP_API_HOST}/api/cities`;
  let cityFetchConfig = {
    method: "post",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json",
    },
  };

  const response = await fetch(cityUrl, cityFetchConfig);
  if (response.ok) {
    const createdCity = await response.json();
    dispatch(
      addCityToCreatedWorld({
        countryPk: countryData.pk,
        newCity: createdCity,
      })
    );
    setSubmitted(true);
  } else {
    console.error(response);
  }
};

问题在于，当一个国家被添加到 Redux 状态时，其 cities 属性可能并未被初始化为一个空数组。因此，当 addCityToCreatedWorld reducer 尝试访问 country.cities 时，如果 cities 是 undefined，调用 push 方法就会导致 TypeError。而刷新页面后可以正常添加，通常是因为页面重新加载时，状态被重新构建，或 cities 数组在其他地方被正确初始化了。

解决方案一：在 Reducer 中即时初始化

最直接的解决方案是在 addCityToCreatedWorld reducer 内部，在尝试添加城市之前，检查 country.cities 是否存在。如果不存在，则将其初始化为一个空数组。

addCityToCreatedWorld: (state, action) => {
  const { countryPk, newCity } = action.payload;

  // 查找对应的国家对象
  const country = state.createdWorld.countries.find(
    (country) => country.pk === countryPk
  );

  if (country) {
    // 关键步骤：检查 cities 数组是否存在，如果不存在则初始化
    if (!country.cities) {
      country.cities = [];
    }
    // 现在可以安全地向 cities 数组中添加新城市
    country.cities.push(newCity);
  }
},

这个方法能够立即解决 TypeError，因为它确保了 cities 数组在被 push 之前总是存在的。然而，这是一种被动的处理方式，每次添加城市时都需要进行额外的检查。

解决方案二：最佳实践——在创建时预先初始化

更推荐和健壮的方法是，在国家对象被添加到 Redux 状态时，就预先初始化其 cities 属性为一个空数组。这样可以确保状态结构的一致性，并且后续的 reducer 操作可以直接假定 cities 数组的存在。

首先，修改 addCountryToCreatedWorld 或相应的 reducer，以在国家对象创建时添加 cities 属性：

addCountryToCreatedWorld: (state, action) => {
  const { country } = action.payload;

  // 在添加国家时，预先初始化其 cities 属性为空数组
  state.createdWorld.countries.push({
    ...country,
    cities: [], // 确保 cities 数组始终存在
  });
},

通过这种方式，无论何时何地，只要一个国家对象存在于 state.createdWorld.countries 中，它就保证会有一个 cities 属性，并且是一个数组（即使是空的）。

一旦国家对象被正确初始化，addCityToCreatedWorld reducer 就可以变得更简洁和安全：

addCityToCreatedWorld: (state, action) => {
  const { countryPk, newCity } = action.payload;

  // 使用可选链操作符 (?) 可以更简洁地处理查找结果
  // 此时，我们已确保 country.cities 总是存在的数组
  state.createdWorld.countries.find(
    (country) => country.pk === countryPk
  )?.cities.push(newCity);
},

在这个优化后的 addCityToCreatedWorld reducer 中，我们不再需要显式检查 country.cities 是否存在，因为我们已经通过 addCountryToCreatedWorld 确保了这一点。可选链操作符 ?. 在 find 方法没有找到匹配的国家时，会优雅地返回 undefined，从而避免对 undefined 调用 push。

注意事项与总结

状态结构一致性： 最佳实践方法强调了维护 Redux 状态结构的一致性。通过在对象创建时就初始化所有预期的嵌套数组或对象，可以避免许多运行时错误，并使 reducer 逻辑更清晰。
Immer 的应用： Redux Toolkit 内部使用了 Immer 库，允许我们在 reducer 中直接对 state 进行“修改”操作，而 Immer 会在背后处理不可变更新。上述代码示例正是利用了这一特性。即使如此，理解状态不可变性的原则仍然非常重要。
预防优于治疗： 在状态管理中，预防性地初始化数据结构通常比在每次操作时进行检查和修复更为高效和可靠。这减少了代码的复杂性，并提高了应用程序的稳定性。
调试技巧： 当遇到此类 TypeError 时，最有效的调试方法是使用 console.log 打印出你尝试访问的中间变量（例如 country 或 country.cities），并结合 Redux DevTools 检查当前状态树的实际结构，从而快速定位 undefined 的来源。