本文旨在解决Redux状态管理中常见的`TypeError: Cannot read properties of undefined (reading ‘push’)`错误，该错误通常发生于尝试向一个尚未被初始化的嵌套数组添加元素时。文章将提供两种解决方案：一种是即时修复，通过条件判断来初始化数组；另一种是推荐的最佳实践，即在父对象首次添加到Redux状态时就预先初始化嵌套数组，从而从根本上避免此类错误，提升状态管理的健壮性。
在React应用中，尤其是在使用Redux进行全局状态管理时，我们经常需要处理复杂且嵌套的数据结构。例如，一个世界对象包含多个国家，每个国家又包含多个城市。当尝试向这些嵌套的数组（如国家的cities数组）中添加新元素时，如果目标数组在Redux状态中尚未被正确初始化，就可能遇到TypeError: Cannot read properties of undefined (reading ‘push’)的错误。
问题分析：TypeError的根源
这个TypeError的出现，是因为我们尝试在一个undefined的值上调用push方法。在Redux reducer中，当某个对象（例如一个country对象）被添加到状态中时，它可能只包含了部分属性，而其内部的某个数组属性（例如cities）可能并未被显式地初始化。
考虑以下Redux slice中的addCityToCreatedWorld reducer：
addCityToCreatedWorld: (state, action) => { const { countryPk, newCity } = action.payload; const countryIndex = state.createdWorld.countries.findIndex( (country) => country.pk === countryPk ); if (countryIndex >= 0) { // 问题出在这里：如果 state.createdWorld.countries[countryIndex].cities 是 undefined // 那么尝试调用 .push(newCity) 就会导致 TypeError state.createdWorld.countries[countryIndex].cities.push(newCity); }}
当一个country对象被创建并添加到state.createdWorld.countries数组中时，如果它的结构是 { pk: ‘some_pk’, name: ‘Some Country’ } 而没有包含 cities: []，那么在后续尝试添加城市时，country.cities就会是undefined，从而触发TypeError。即使Redux DevTools显示国家已存在，但其内部的cities数组可能缺失。
解决方案一：即时修复与条件初始化
最直接的解决方案是在尝试push之前，检查目标数组是否存在。如果不存在，则先将其初始化为一个空数组。
addCityToCreatedWorld: (state, action) => { const { countryPk, newCity } = action.payload; // 使用 find 方法更直接地获取国家对象 const country = state.createdWorld.countries.find( (country) => country.pk === countryPk ); if (country) { // 关键步骤：检查 country.cities 是否存在，如果不存在则初始化为空数组 if (!country.cities) { country.cities = []; } country.cities.push(newCity); }}
解析：此方法通过一个简单的if (!country.cities)判断，确保了在调用push之前，country.cities始终是一个数组。如果它是undefined，就会被赋值为一个新的空数组[]，从而避免了TypeError。
优点：
快速解决当前问题，无需修改其他reducer。适用于已存在数据可能不一致的场景。
缺点：
这是一种被动修复，每次添加城市时都需要进行检查。如果类似的嵌套数组在其他地方也可能未初始化，则需要在每个相关reducer中重复此检查。
解决方案二：最佳实践——预防性初始化
更健壮和推荐的做法是，在父对象（例如country）首次被添加到Redux状态时，就将其内部的所有预期数组属性初始化为空数组。这样，后续任何对这些数组的操作都无需担心它们是undefined。
假设我们有一个addCountryToCreatedWorld的reducer，负责将新的国家添加到状态中：
addCountryToCreatedWorld: (state, action) => { const { country } = action.payload; // 最佳实践：在添加国家时，就确保其 cities 属性被初始化为空数组 state.createdWorld.countries.push({ ...country, cities: [], // 预防性初始化 });}
通过在addCountryToCreatedWorld reducer中初始化cities: []，我们保证了任何被添加到状态中的country对象都会有一个cities数组，即使它当前是空的。
有了这个预防性初始化，addCityToCreatedWorld reducer就可以变得更加简洁和安全：
addCityToCreatedWorld: (state, action) => { const { countryPk, newCity } = action.payload; // 由于 country.cities 保证已被初始化，可以直接安全地进行操作 state.createdWorld.countries.find( (country) => country.pk === countryPk )?.cities.push(newCity);}
这里使用了可选链操作符（?.）来增强代码的健壮性，即使find没有找到对应的country，也不会报错。
解析：此方法将状态的结构一致性维护提前到数据创建阶段。当一个country被添加到createdWorld时，它就带有了cities: []属性，确保了cities永远不会是undefined。
优点：
从根本上消除了TypeError的风险。代码更清晰、更简洁，减少了重复的条件检查。提升了Redux状态的结构一致性和可预测性。符合“尽早发现错误”的编程原则。
注意事项与总结
Redux Toolkit与Immer： 如果您使用的是Redux Toolkit，它内部集成了Immer库，允许您在reducer中编写“看似”直接修改状态的代码。但无论如何，理解状态的不可变性原则以及避免undefined引用仍然至关重要。Immer会为您处理不可变更新的细节，但不会改变您访问undefined属性时JavaScript的运行时行为。状态结构一致性： 保持Redux状态结构的严格一致性是避免这类错误的关键。始终确保所有对象都按照预期的完整结构进行初始化，包括所有嵌套的数组和对象。数据源检查： 在从API或其他外部源获取数据并将其存入Redux状态时，也应进行相应的结构检查和默认值设置，以确保进入Redux状态的数据是“干净”且符合预期的。错误处理： 尽管预防性初始化能大大减少错误，但在实际应用中，网络请求失败、数据格式不正确等情况仍可能发生。因此，在组件中处理API响应时，仍需进行适当的错误检查和用户反馈。
通过采纳预防性初始化这一最佳实践，您可以构建更稳定、更易于维护的Redux应用程序，避免因常见的数据结构问题而导致的运行时错误。
以上就是Redux深度指南：避免向未初始化数组push导致的TypeError的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540902.html
微信扫一扫 
支付宝扫一扫 
