React - 将子数据传递给父 - 错误的复选框值答案

【问题标题】：React - Passing child data to parent - wrong checkbox valueReact - 将子数据传递给父 - 错误的复选框值
【发布时间】：2020-05-03 17:59:31
【问题描述】：

我有一个子组件，其中包含使用 Bootstrap 4 的自定义开关（请参阅此处：https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp）。如果值发生变化，则应使用回调函数将值传递给父组件，然后更新父组件的状态。

数据流本身工作正常，唯一的问题是发送了错误的值。作为初始值，开关为假。切换开关后，该值应为 true，但 false 的值将传递给父级。

这是我的组件：

父组件：

class Questionnaire extends Component {
    constructor(props) {
        super(props);

        this.state = {
            review: false
        };
    }

    sendData = childData => {
        this.setState({
            review: childData
        });
    }

    render() {
        return(
            <div className="container">
                <Question sendData={this.sendData}/>
            </div>
        );
    }
}

这里是我的子组件：


class Question extends Component {
    constructor(props) {
        super(props);

        this.state = {
            example: false
        };
    }

    onChangeSwitch = () => {
        this.setState({
            example: !this.state.example
        });

        this.props.sendData(this.state.example);
    }

    render() {
        return(
            <div className="custom-control custom-switch">
                <input type="checkbox" className="custom-control-input" id="switch" checked={this.state.example} onChange={this.onChangeSwitch}/>
                <label className="custom-control-label" htmlFor="switch">Do you like milk?</label>
            </div>
        );
    }
}

总结：在初始状态，开关的值为 false。单击开关后，该值变为 true 并更新子级的状态，该状态旨在通过回调传递给父级。事实上，子组件的旧状态（假）被传递给子组件。非常感谢您的帮助！

【问题讨论】：

标签： javascript reactjs twitter-bootstrap

【解决方案1】：

您的父状态正在更新，但更新较晚，因为setState 是一个异步函数，因此当您调用它然后立即调用sendData 它尚未更新。添加一个回调到setState，它应该像这样工作：

 this.setState({example: !this.state.example},function(){
 this.props.sendData(this.state.example);
});

【讨论】：