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

问题描述

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

父级组件将状态值保持不变，并通过 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",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（）以尝试再次接收道具，但从未触发。

解决方法

好，所以这里的问题是您的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>
        )
    }
}