Reactjs 状态更改不会传播到 dynamically-created children 组件

Question

我正在学习 React，在处理一个更大的项目时，我创建了这个模型来展示我遇到的问题。

parent 组件 维护一个状态值，它通过 props 传递给 children。我希望此值 传播到 children 并在 parent 状态下更改时在那里更新。这适用于此代码的第一个版本：

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>
        )
    }
}

但是，在项目的最终版本中，我需要动态创建children。我这样做：

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>
        )
    }
}

...和 当我按下按钮并更改 parent 的状态时，该值不再传播到 children：results screenshots.

如何保持 child div 的动态创建并仍然传播 parent 值？ 我感觉到这个问题可能是因为值和children div 数组都保持在 parent 状态，但我不确定如何修复它。数小时的搜索和查看示例表明我应该从头开始重新创建 children div - 运行再次设置 - 但对于我认为无论如何都应该传播的状态值来说，这似乎有点过分了。

Child组件代码供参考：

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 以尝试再次接收道具，但它从未触发。

Answer 1

好的，所以这里的问题是你的 children_divs 创建了一次，single_val 的值当时对他们来说是 added/sent （当你在 setUp 功能。解决方案很简单，在 render 函数中创建 children，因为每次 state 更改时都会调用 render。这也会将您的 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>
        )
    }
}

Reactjs 状态更改不会传播到 dynamically-created children 组件

Reactjs state changes do not propagate to dynamically-created children components

state

parent-child

propagation

reactjs

react-props