Reactjs 当存在'时，向子组件发送道具；如果父组件的状态发生更改，则子组件的状态始终落后一个

这是父组件的代码。它有一个按钮，还包含一个子组件

我的问题是：当

状态的值改变时，React是否能够发送
道具
？如果没有，那么当状态发生变化时，我需要做什么来发送道具


虽然组件将在状态更改后重新渲染，但我必须单击按钮两次才能看到文本中的更改

如何使其与父组件中的状态更改同步发生？

父组件的代码：

class ParentComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {
                toBeDrafted: false
            };
            this.handleButtonClick = this.handleButtonClick.bind(this);
        }

        handleButtonClick() {
            this.setState({
                toBeDrafted: true
            });
        }

        render() {
            return (
                <React.Fragment>
                    <button onClick={this.handleButtonClick}>Click Me</button>
                    <ChildComponent valueOfButton={this.state.toBeDrafted} />
                </React.Fragment>
            );
        }
    }

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
toBeDrafted:错误
};
this.handleButtonClick=this.handleButtonClick.bind（this）；
}
把手按钮点击（）{
这是我的国家({
toBeDrafted：是的
});
}
render（）{
返回(
点击我
);
}
}

这是子组件的代码

class ChildComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toBeUpdated: false
        };
    }

    componentWillReceiveProps() {
        if (this.props.valueOfButton === true) {
            this.setState({
                toBeUpdated: !this.state.toBeUpdated
            });
        }
    }

    render() {
        return (
            <React.Fragment>
                <p>
                    The Button has been
                    {
                        this.state.toBeUpdated === true
                        ? "clicked"
                        : "not clicked"
                    }
                </p>
            </React.Fragment>
        );
    }
}

class-ChildComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
toBeUpdated:错误
};
}
组件将接收道具（）{
if（this.props.valueOfButton===true）{
这是我的国家({
toBeUpdated:！this.state.toBeUpdated
});
}
}
render（）{
返回(

按钮已被按下
{
this.state.toBeUpdated==true
？“点击”
：“未单击”
}

);
}
}
当我们单击“单击我”按钮时，会调用
把手按钮单击（）
，该按钮内部调用
设置状态（）

在这个调用中，页面被重新呈现。这导致传递给子组件的道具值发生更改。因此，当您使用
setState
更改父组件的状态时，传递给子组件的道具也会更改

更新您的更新问题：

componentWillReceiveProps() {
   this.setState({
      toBeUpdated: !this.state.toBeUpdated
    });
  }

删除if条件，因为它是导致问题的条件，并且当我们单击“单击我”按钮时，道具会正确更新。
handleButtonClick（）
被调用，其中调用了
setState（）

在这个调用中，页面被重新呈现。这导致传递给子组件的道具值发生更改。因此，当您使用
setState
更改父组件的状态时，传递给子组件的道具也会更改

更新您的更新问题：

componentWillReceiveProps() {
   this.setState({
      toBeUpdated: !this.state.toBeUpdated
    });
  }

删除if条件，因为它是导致问题的条件，并且道具已正确更新
您不应该使用ComponentWillReceiveProps，因为它是遗留的，会导致问题。
检查文档：
您不应该使用ComponentWillReceiveProps，因为它是遗留的，会导致问题。
检查文档：
Yes，当您设置State react重新启动组件及其子级并将新道具传递给子级时。我们可以在子级中定义按钮吗？这将解决您的问题是的，您可以在孩子身上定义按钮。并将handleButtonClick作为道具传递给子组件，以便在单击子组件上的按钮时调用父组件上的处理程序@NikhilPathaniaYes当您设置State react重新启动组件及其子组件时，将新的道具传递给子组件。我们可以在子组件中定义按钮吗？这将解决您的问题是的，您可以在孩子身上定义按钮。并将handleButtonClick作为道具传递给子组件，以便在单击子组件上的按钮时调用父组件上的处理程序@NikhilPathaniayes，但我想立即反映出来。相反，在第一次单击时，它发送false，我不希望出现这种行为。我怎么纠正呢？我检查了，它在第一次点击时工作，我希望它能帮上忙，但我希望它能立即反映出来。相反，在第一次单击时，它发送false，我不希望出现这种行为。我怎么纠正呢？我检查过了，它在第一次点击时工作，我希望它有帮助