Question

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

我的问题是：prop的值更改时，React能够发送state吗？如果不是，那么当状态改变发生时我该怎么做发送道具？

尽管状态更改后组件将重新呈现，但是我不得不单击两次按钮才能看到文本中的更改。

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

父组件的代码：

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

这是子组件的代码

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

Answer 1

当我们单击“单击我”按钮时，将调用handleButtonClick()，在其内部称为setState()

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

更新为您更新的问题：

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

删除if条件，因为它是导致该问题的原因并且道具已正确更新

Answer 2

您不应使用componentWillRecieveProps，因为它是旧版的并且会引起问题。检查文档：componentWillRecieveProps

在父组件的状态发生变化时向子组件发送道具，子组件的状态总是落后于

2 个答案: