React+Redux报错：无法解构this.props.data的chats属性

嘿，我一眼就看到问题所在啦！你遇到的Cannot destructure property 'chats' of 'this.props.data' as it is undefined错误，核心原因是你的mapStateToProps函数没有把Redux store里的data reducer状态映射到组件的props中。

问题分析 #

看一下你当前的mapStateToProps：

const mapStateToProps = state =>({
  authenticated: state.user.authenticated
})

这里只从state.user里取了authenticated属性，完全没有把state.data（也就是你配置了chats和loading的那个reducer）映射到组件props里，所以组件里访问this.props.data自然就是undefined了。

修复步骤 #

1. 修改mapStateToProps，添加data映射
   把state.data加到返回对象里，这样组件就能拿到包含chats和loading的data属性了：

const mapStateToProps = state =>({
  authenticated: state.user.authenticated,
  data: state.data // 关键：引入data reducer的状态
})

2. 清理无用的PropTypes
   你的chat.propTypes里声明了classes: PropTypes.object.isRequired，但组件里根本没用到classes这个props，要么去掉这一行，要么如果你是用Material-UI的withStyles高阶组件，记得把组件包裹进去。如果没用到withStyles，直接删掉这行即可：

chat.propTypes = {
  getChats: PropTypes.func.isRequired
  // 移除classes这行，因为组件未使用该props
}

额外检查（可选） #

确保你的根reducer已经正确合并了data reducer，比如在rootReducer.js里应该有类似这样的代码：

import { combineReducers } from 'redux';
import dataReducer from './dataReducer';
import userReducer from './userReducer';

export default combineReducers({
  data: dataReducer,
  user: userReducer
});

这一步你应该已经做了，不过确认一下更稳妥。

改完这两处之后，组件就能正常访问this.props.data.chats和this.props.data.loading，错误应该就消失啦！

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