React 将数组从父状态传递到子状态答案

【问题标题】：React pass Array from Parent state to child stateReact 将数组从父状态传递到子状态
【发布时间】：2018-11-09 16:17:25
【问题描述】：

我有一个父组件持有一个称为节点的状态，它被建立为一个数组。我正在尝试将 this.state.nodes 传递给子组件，并让该组件将数组作为子组件状态的一部分，但它不起作用。代码如下：

 <ChildComponent nodes={this.state.graphNodes}/>

这是在返回语句中。经过一些测试/控制台记录后，我知道该道具正在通过。

在子组件中，我有：

this.state = {
    nodes: this.props.nodes,
    links: [],
    totalNodes: [],
    totalLinks: []
}

但是当我尝试在子组件渲染或返回中引用它或映射它或对它做任何事情时，它告诉我它是一个空数组。

【问题讨论】：

子组件构造函数中是否调用super(props);？也可能是你父组件中的this.state.graphNodes是异步获取的，所以当你第一次渲染子组件时它还没有设置。
显示一个更完整的 ChildComponent 代码示例。另外，只需在您的子渲染函数中使用this.props.nodes
...无论如何，将东西从proprs 放到state 通常是个糟糕的选择。更好地在孩子的render() 中迭代this.props.nodes
感谢大家的反馈。你说的都对...... this.props.nodes 直接使用而不是将其置于子组件状态下效果很好。

标签： javascript arrays reactjs

【解决方案1】：

由于graphNodes 处于组件状态，我认为它的初始值应该是一个空数组，并且您正在使用props.nodes 在constructor 初始化状态，因为constructor 在初始化阶段只呈现一次此时组件graphNodes必须是一个空数组，改变父组件状态后，子组件中的状态不会更新。这使得graphNodes state 总是一个空数组。

你为什么不直接使用props，如果你不需要更改子组件中的graphNodes值你可以直接从props使用它。

如果你真的想将props 映射到state，你必须在componentDidUpdate 生命周期方法中在适当的条件下进行

【讨论】：

我支持直接使用 props.nodes 的建议。因为 js 中的数组是一个“对象”，所以您将数组作为引用而不是作为副本传递，这意味着您将在父组件和子组件上使用相同的数据集。如果数据更新，我建议将函数/方法传递给子组件以更改父组件上的状态，并且更改也会通过 props.nodes 反映在子组件中
谢谢奥兹！你是对的，感谢你的帮助。

【解决方案2】：

所有的cmets都死了。直接使用 this.props.nodes 而不是尝试将其置于子状态是完美的解决方案。感谢所有回复的人！

【讨论】：