将传递数组从父状态反应到子状态

时间:2018-11-09 16:17:25

标签: javascript arrays reactjs

我有一个父组件,拥有一个称为节点的状态,该状态被建立为数组。我试图将this.state.nodes传递给子组件,并让该组件将数组作为子组件状态的一部分,但它不起作用。这是代码:

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

这在return语句中。经过一些测试/控制台记录后,我知道道具已通过。

在子组件中,我有:

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

但是当我尝试引用它或映射它或在子组件渲染或返回中对其进行任何处理时,它告诉我这是一个空数组。

2 个答案:

答案 0 :(得分:1)

由于graphNodes处于组件状态,我认为它的初始值应该是一个空数组,并且您正在props.nodes的{​​{1}}初始化状态,因为constructor constructor在组件的初始化阶段仅渲染一次,此时graphNodes必须为空数组,更改父组件状态后,子组件中的状态将不会更新。这使得graphNodes状态始终是一个空数组。

为什么不直接使用props,如果不必更改子组件中的graphNodes值,则可以直接从props使用它。

如果您确实希望将props映射到state,则必须在componentDidUpdate生命周期方法中并在适当条件下进行操作

答案 1 :(得分:0)

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