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可能会以减速器的名称作为前缀。

验证了实际的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>，然后就可以了。

注意：

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

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

2 个答案: