react-redux 将 props 传递给子组件 props答案

【问题标题】：react-redux passing props to child component propsreact-redux 将 props 传递给子组件 props
【发布时间】：2017-05-17 16:48:55
【问题描述】：

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

当我将状态传递给子组件时，它可以工作 这是工作代码：

 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 在调用组件中实际上不是空的？

谢谢

【问题讨论】：

请展示整个组件类以及如何将组件连接到 Redux 存储区。
你在用connect()吗？
是的，我使用过 connect() 并且 this.props.posts 出现在同一个组件中，就像我执行 this.props.posts.map(x=> x) 一样，结果是正确的。 . 只有当我尝试将 this.props.posts 作为道具放入
您能否至少在使用该道具的地方添加 PostList 组件的代码
@JaredDykstra 是的，这是故意的，我刚刚为该组件创建了一个本地状态 this.state = {posts : [items here]} 它在使用该本地状态时被很好地传递，但不是在我使用来自 mapStateToProps 的那个，即使 this.props.state 在该组件中运行良好，而不是当我将它作为道具传递给时

标签： javascript reactjs redux react-redux react-jsx

【解决方案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)

【讨论】：

使用redux-devtools，数据在同一个组件中很好，只是在尝试将它传递到时，就像在中一样进去是空的。甚至认为 this.props.posts 在调用 PostList 的组件中不为空
@JoeSaad 是什么让你觉得它是空的？
在控制台中的组件 componentDidMount() 方法中看到它。我正在做 console.log(this.props.list) 在传递 this.props.post 时为空，但是通过 this.state.posts 时它已经满了
你能发布一个 webpackbin 来显示不工作的代码吗？
你能添加你的整个组件吗？您的问题可能出在 React with props 上，可能出在未正确返回数据的 Reducer 上，也可能是您的 combineReducers...

【解决方案2】：

您不应该只是附加到存储在您的子组件中吗？如果它是动态的，您可以将信息传递到附加位置。虽然通过道具传递商店价值听起来是个坏主意。

对于您的示例 - this.props.posts 道具是初始值，重新渲染不是由您的范围内的道具更改引起的。更清晰的解释：如果父组件更改子组件的道具 - 这会导致重新渲染。如果父级更改它自己的道具，则不会触发重新渲染。（this.props 不应该被改变）

如果你想引起一个动作使用 state - 将 props 传递给 state。那么对状态的任何操作都会导致子元素的重新渲染。

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

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

已编辑：

嗯，我的回答有点混乱。让我再试一次。

解决办法：

附加到存储或获取数据的任何位置，并将此数据传递给 this.state.posts = data。在组件的构造函数中设置默认状态，例如this.state = { posts: [] }（或任何需要的结构）。在render() 中，将您对孩子的呼叫更改为<PostList list={ this.state.posts }></PostList>，然后就可以了。

注意：

无论如何，既然您使用的是 redux，我相信如果您只附加到子组件内的 redux 存储区会更好。

【讨论】：