react-redux将道具传递给子组件道具

Question

我试图将道具传递给子组件但是孩子总是收到空的。 这是使代码更清晰的代码。

当我传递给子组件一个状态时，它工作在这里是工作代码：

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

但在我的情况下，我想从redux状态传递道具

不工作的代码：

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以确保引用正确的状态切片。 在你的问题中，我想知道你是否需要调整它，但我不能确定你不知道你的还原状态是​​什么。

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

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

export default connect(mapStateToProps, mapDispatchToProps)(MyReactClass)

Answer 2

你不应该只是附加到你孩子组件中的商店吗？ 如果信息是动态的，您可以将信息传递到何处。 虽然通过道具传递商店价值听起来像一个坏主意。

至于你的例子 - this.props.posts道具是初始值，重新渲染不是由你的范围内的道具变化引起的。 更清楚的解释：如果父母改变儿童成分的道具 - 这会引起重新回复。 如果父母改变它自己的道具，则不会触发重新渲染。 （this.props不应该变异）

如果你想使一个动作使用状态 - 将道具传递给状态。 然后对状态的任何操纵都将导致重新渲染孩子。

<PostList list={ this.state.posts }></PostList>

创建道具后会触发附加到redux-state，因此在调用子项时它是空的（如上所述）它不会触发重新渲染。

---

编辑 ：

好吧，我的回答有点混乱。 让我再尝试一次。

解：

附加到商店或获取数据的任何地方，并将此数据传递给this.state.posts = data 。 在组件的构造函数中设置默认状态，如this.state = { posts: [] } （或者需要任何结构）。 在render() ， <PostList list={ this.state.posts }></PostList> child的调用更改为<PostList list={ this.state.posts }></PostList>然后就可以了。

注意：

无论如何，因为你正在使用redux我相信如果你只是附加到你的子组件内的redux商店会更好。