javascript - react-redux 将 props 传递给子组件 props

Question

我正在尝试将 props 传递给子组件，但子组件总是收到一个空的。这是使其更清晰的代码。

当我向子组件传递一个状态时，它起作用了这是工作代码:

 render() {
   return (
     <div>
       <PostList list={ this.state.posts }></PostList> 
  </div>
  );
}

但在我的例子中，我想从 redux state 传递 props

无效代码:

render() {
    return (
      <div>
          <PostList list={ this.props.posts }></PostList>
      </div>
      );
  }
}
function mapStateToProps(state) {
  return {
    posts: state.posts.all,
    postDetail: state.posts.post
  }
}

为什么 PostList 在第二种情况下得到一个空对象，即使 this.props.posts 在调用组件中实际上不是空的？

谢谢

Answer 1

安装 redux-devtools看看你的 redux 状态实际上是什么样的。例如，如果您使用了 combineReducers()，那么 .posts 可能会以 reducer 的名称为前缀。

一旦您验证了实际的 redux 状态，请仔细检查 mapStateToProps 以确保您引用了正确的状态切片。在你的问题中，我想知道你是否需要调整它，但如果不先知道你的 redux 状态是什么，我无法确定。

function mapStateToProps(state) {
  return {
    posts: state.posts
  }
}

请确认您要导出的内容。我假设您的 render() 方法包含在一个类中？如果是这样，请确保导出 connect() 的结果。像这样:

export default connect(mapStateToProps, mapDispatchToProps)(MyReactClass)