Question

我的React组件中有以下状态：

state = {
        genderRadioClick : false,
        ageRadioClick : false
    }

我有以下函数调用组件中每个单选按钮的onChange：

_updateRadioButtonValuesObsolte = (e) => {

    let newStateOfCheckboxs = {
        genderRadioClick : Array.from(document.getElementsByName('customer_gender')).some( (elem , idx) => {  return elem.checked  }),
        ageRadioClick : Array.from(document.getElementsByName('customer_age')).some( (elem , idx) => {  return elem.checked  })
    }

    console.log(newStateOfCheckboxs);

    this.setState({
        ...newStateOfCheckboxs
    });

    console.log(this.state);

}

当我选中其中一个单选按钮并运行以下代码行时：

console.log(newStateOfCheckboxs); // {genderRadioClick: true, ageRadioClick: false}

哪个是正确的，但是以下行的输出：

console.log(this.state);  // {genderRadioClick: false, ageRadioClick: false}

错了，为什么compomemnt状态中键的值是错误的？即使我正在更新如下：

this.setState({
            ...newStateOfCheckboxs
        });

我在这里做错了什么？

Answer 1

setState是一个异步函数

this.setState（{ ... newStateOfCheckboxs }）; 的console.log（this.state）;

通过这种方式，您希望在调用setState后立即更新状态。但是你可以遵循回调方法

this.setState({
    ...newStateOfCheckboxs
}, function(){
console.log(this.state);
});

状态在react app中被错误地更新，但是对象显示正确的值

1 个答案: