mapStateToProps返回错误props值：state.foo为true但this.props.foo显示false

嘿，我来帮你揪出这个问题的根源！从你贴的代码来看，有两个很关键的点需要检查，咱们一个个来：

1. 容器组件缺少render()方法 #

你写的BarContainer类组件直接写了return(...)，这是错误的写法！React类组件必须通过render()方法来返回JSX内容。现在的代码会导致组件无法正确渲染，甚至可能让props的传递出现异常。

修正后的容器组件应该是这样：

class BarContainer extends React.Component{
  render() { // 必须加上这个render方法
    return( <NextPage foo = {this.props.foo} /> )
  }
}
const mapStateToProps = state => {
  return {foo: state.foo}
}
export default connect(mapStateToProps)(BarContainer);

2. Redux Store的结构与mapStateToProps不匹配 #

你的Reducer直接返回布尔值（默认false，触发ADD_POST后返回true），但这里要确认你的Store是怎么组合reducer的：

• 如果你是直接把这个reducer作为根reducer，那整个Redux的state就是这个布尔值，而不是一个包含foo属性的对象。这时候state.foo会是undefined，组件里可能会把undefined当成false显示。这种情况下，你需要修改mapStateToProps：

  const mapStateToProps = state => {
    // state本身就是你的reducer返回的布尔值
    return {foo: state}
  }
  

• 如果你是用combineReducers组合的reducer，比如：

  import { combineReducers } from 'redux';
  import yourReducer from './yourReducer';
  
  const rootReducer = combineReducers({
    foo: yourReducer // 这里把reducer挂载到了foo字段下
  });
  

  那state.foo才是正确的取值方式，但这时候你需要在mapStateToProps里打印一下实际的state，确认结构是否正确：

  const mapStateToProps = state => {
    console.log('当前Redux State:', state); // 打印出来看看实际结构
    return {foo: state.foo}
  }
  

快速验证步骤 #

1. 先把容器组件的render()方法补上，这是最基础的错误；
2. 在mapStateToProps里添加console.log，查看state的实际结构，确认state.foo是否真的是true；
3. 根据state的结构调整mapStateToProps的返回值。

按照这个步骤来，应该就能解决你遇到的props值不匹配问题啦！

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