React Redux使用Axios请求PHP成功后更新store状态报props未定义错误

报错直接根因 #

TypeError: Cannot read property 'props' of undefined 完全来自回调的this绑定丢失：

• 你在Axios的.then()成功回调中使用了普通function声明，这类独立函数的this不会继承外层组件实例的上下文，在模块严格模式下this直接指向undefined，执行到this.props.load_state时自然抛出错误。
• 这个错误直接导致回调执行中断，根本没走到dispatch动作的步骤，这也是Redux状态没有按预期更新的核心原因，和Axios请求、Redux基础配置无关。

代码里的隐性逻辑漏洞 #

就算解决this绑定问题，现有代码还是存在两个会导致功能失效的问题：

• 你已经写好了mapStateToProps和mapDispatchToProps逻辑，但定义完Produit类组件后，没有调用connect将组件与Redux store关联，就算回调执行正常，组件props里也拿不到store状态和dispatch方法。
• Reducer处理load_produit_to_state动作时，直接返回仅包含liste_produit字段的新对象，会把初始状态里的profile字段覆盖丢失，不符合Redux纯函数更新的规范，会导致其他依赖全局状态的功能异常。

对应修复步骤 #

1. 修复回调this绑定：把Axios成功回调的普通函数改成箭头函数，箭头函数会继承外层componentDidMount的组件实例上下文，可直接正常访问props：

   // 原错误写法
   .then(function(reponce){
       this.props.load_state(reponce.data.liste_produit);
   })
   // 修复后写法
   .then((reponce) => {
       this.props.load_state(reponce.data.liste_produit);
   })
   

2. 补充Redux连接逻辑：在类组件定义完成后，通过connect包装导出组件，将store状态和dispatch方法注入到组件props中：

   // 在类定义代码末尾加上
   export default connect(mapStateToProps, mapDispatchtoprops)(Produit)
   

3. 修正Reducer的状态更新逻辑，更新状态时保留原有状态字段，避免非法覆盖：

   // 原错误写法
   case 'load_produit_to_state':alert(action.payload); return{ liste_produit: action.payload };
   // 修复后写法
   case 'load_produit_to_state':
       alert(action.payload);
       return { ...state, liste_produit: action.payload };
   

4. 细节优化：实例化FormData时补上括号，写为const request = new FormData()，符合JS构造函数实例化规范，避免部分环境的语法报错。

内容的提问来源于stack exchange，提问作者sifo