React类组件结合Redux时报Cannot read property 'user' of undefined如何解决

• 核心错误1：mapStateToProps配置错误
  你在combineReducers中把userReducer挂载到了users根state字段下，但你在mapStateToProps中错误读取了state.user（少了末尾s），同时返回的props键名是user而非users，这就导致组件props里根本不存在users属性，访问this.props.users.user自然会抛出Cannot read property 'user' of undefined错误。
  修正mapStateToProps写法：

const mapStateToProps = state => ({
    users: state.users, // 和combineReducers里的根字段对应，props键名也保持一致
})

• 核心错误2：对象判空逻辑错误
  你写的user !== {}永远返回true，因为对象是引用类型，对比的是内存地址而非内容，空对象字面量{}和你存储的user对象永远不相等，会导致即使user是空对象也会尝试读取user.name，可能抛出新的错误。
  修正判空逻辑，改用可选链兜底：

renderUser = (user) => {
    return user?.name ? <p>{user.name}</p> : 'User not found'
}

• 优化点：异步请求初始渲染兜底
  getUser请求是在componentDidMount中触发，首次渲染时请求还未返回，此时要做好值不存在的兜底，避免报错。

完整修正后代码 #

class User extends Component {
    componentDidMount() {
        this.props.getUser('60ab0b564fbb1d334002c777');
    }

    renderUser = (user) => {
        return user?.name ? <p>{user.name}</p> : 'User not found'
    }

    render() {
        const { users } = this.props;
        return (
                <div>
                    {users?.user ? this.renderUser(users.user) : '加载中...'}
                </div>
        )
    }
}

const mapStateToProps = state => ({
    users: state.users,
})

export default connect(mapStateToProps, {
    getUser,
})(User);

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