Реакция - передача дочерних данных родителю - неверное значение флажка

Question

У меня есть дочерний компонент, который содержит пользовательский переключатель, используя Bootstrap 4 (см. Здесь: https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp). Если значение изменяется, его следует передать родительскому компоненту с помощью функции обратного вызова, а затем обновить состояние родителя.

Сам поток данных работает правильно, единственная проблема заключается в том, что неправильное значение отправлено. В качестве начального значения переключатель имеет значение false. После переключения переключателя значение должно быть 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 и обновляет состояние детей, которое предполагается передать родителю с помощью обратного вызова. Фактически старое состояние (false) дочерних элементов передается дочернему компоненту. Большое спасибо за помощь!

Answer 1

Ваше родительское состояние обновляется, но оно обновляется поздно, потому что setState является асинхронной c функцией, поэтому, когда вы вызываете ее, а затем немедленно вызываете sendData, она еще не обновлена. Добавьте обратный вызов к setState, и он должен работать так:

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