React.js状态更改不会传播到动态创建的子组件

时间:2020-10-06 10:24:32

标签: reactjs state parent-child react-props propagation

我正在学习做出反应,并在做一个更大的项目时创建了这个模型来显示我遇到的问题。

父级组件将状态值保持不变,并通过 props 传递给子级。我希望此值传播给孩子并在父状态下更改时在那里更新。在此代码的第一个版本中有效:

import React from "react"
import Child from './Child'

export default class Parent extends React.Component {
    
    constructor() {
        super();
        this.state = {
            single_val: false,
        }
    }

    render() {

        return(
            <div className="Parent" style={{border: "solid orange 1px", padding: "15px"}}>
                <p>Parent val: {this.state.single_val.toString()}</p>
                <Child parent_val={this.state.single_val}/>
                <Child parent_val={this.state.single_val}/>
                <Child parent_val={this.state.single_val}/>
                <div className="switch" 
                    style={{height: "50px", width: "50px", backgroundColor: "lightPink"}}
                    onClick={(e)=>{this.setState({single_val: true})}}
                >
                </div>
            </div>
        )
    }
}

但是,在项目的最终版本中,我需要动态创建子代。我是这样的:

import React from "react"
import Child from './Child'

export default class Parent extends React.Component {
    
    constructor() {
        super();
        this.state = {
            single_val: false,
            children_divs: [],
        }
        this.setUp = this.setUp.bind(this);
    }

    componentDidMount() {
        this.setUp();
    }

    setUp() {

        var baseArray = [...Array(3)];
        var children = baseArray.map((elem)=>{
            return (<Child parent_val={this.state.single_val} />)
        });

        this.setState({children_divs: children});
    }

    render() {

        return(
            <div className="Parent" style={{border: "solid orange 1px", padding: "15px"}}>
                <p>Parent val: {this.state.single_val.toString()}</p>
                
                {this.state.children_divs}

                <div className="switch" 
                    style={{height: "50px", width: "50px", backgroundColor: "lightPink"}}
                    onClick={(e)=>{this.setState({single_val: true})}}
                >
                </div>
            </div>
        )
    }
}

...和当我按下按钮并更改父母的状态时,该值不再传播给孩子results screenshots

如何保持子div的动态创建并仍然传播父值?我感觉到问题可能是因为值和子div数组都保持在父状态,但是我我不确定该如何解决。经过数小时的搜索和查看示例,我建议我应该从头开始重新创建子div-再次运行setUp-但对于一个我认为应该仍然传播的状态值来说,这似乎有些过头了。

子组件代码供参考:

import React from "react"

export default function Child(props) {
    return (
        <div className="Child">
            <p>Child val: {props.parent_val.toString()}</p>
        </div>
    )
}

P.S。我什至尝试过向孩子添加componentDidUpdate()以尝试再次接收道具,但从未触发。

1 个答案:

答案 0 :(得分:0)

好,所以这里的问题是您的children_divs被创建一次,并且single_val的值在那时被添加/发送(当您在setUp函数中创建它们时)。 解决方案很简单,在render函数中创建孩子,因为render每次更改时都会调用state。这也将children_divs从状态中删除,因为它仅用于呈现并且没有其他目的。

import React from "react"
import Child from './Child'

export default class Parent extends React.Component {
    
    constructor() {
        super();
        this.state = {
            single_val: false,
        }
    }

    render() {
        var baseArray = [...Array(3)];
        var children_divs= baseArray.map((elem)=>{
            return (<Child parent_val={this.state.single_val} />)
        });

        return(
            <div className="Parent" style={{border: "solid orange 1px", padding: "15px"}}>
                <p>Parent val: {this.state.single_val.toString()}</p>
                
                {children_divs}

                <div className="switch" 
                    style={{height: "50px", width: "50px", backgroundColor: "lightPink"}}
                    onClick={(e)=>{this.setState({single_val: true})}}
                >
                </div>
            </div>
        )
    }
}