Json 反应：状态更新延迟

我正试图通过选中单选按钮来改变状态。当我选中它时，它仅在我选中“下一步”单选按钮后更新该值。如果我单击第一个单选按钮，它将不会更改状态，如果我选中第二个单选按钮，它将使用先前选中的单选按钮值更新状态。有人能帮我修一下吗

class App extends React.Component {

    state = { checked: false, radioValue: '' }

    handleChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        console.log("this.state", this.state); // Gets previous value

        this.setState({
          [name]: value
        });
      }

    render() {

        return (
            <div className="wrapper">

                       <input
          name="radioValue"
          type="radio"
          value="aaa"
          checked={this.state.radioValue === 'aaa'}
          onChange={this.handleChange} />First Radio Button

            <br />

        <input
          name="radioValue"
          type="radio"
          value="bbb"
          checked={this.state.radioValue === 'bbb'}
          onChange={this.handleChange} />Second Radio Button

            </div>
        );
    }
}

export default App;

类应用程序扩展了React.Component{
状态={checked:false，radioValue:'}
handleChange=（事件）=>{
const target=event.target；
常量值=target.value；
const name=target.name；
console.log（“this.state”，this.state）；//获取上一个值
这是我的国家({
[名称]：值
});
}
render（）{
返回(
第一个单选按钮


第二个单选按钮
);
}
}
导出默认应用程序；

您也可以通过在setstate中使用callback进行这样的检查

您也可以使用setstate中的callback进行类似的检查，请尝试此操作。 类应用程序扩展了React.Component{

constructor(props) {
    super(props);
    this.state = {
        checked: ""
    };
}

handleChange = (event) => {
    console.log("this.state", this.state); // Gets previous value
    this.setState({
      checked: event.target.value
    });
}

render() {

    return (
        <div className="wrapper">
            <input name="radioValue" type="radio" value="aaa"
                checked={this.state.checked === 'aaa'}
                onChange={this.handleChange} />
                First Radio Button
            <br />
            <input name="radioValue" type="radio" value="bbb"
                checked={this.state.checked === 'bbb'}
                onChange={this.handleChange} />
                Second Radio Button
        </div>
    );
}

构造函数（道具）{
超级（道具）；
此.state={
勾选：“”
};
}
handleChange=（事件）=>{
console.log（“this.state”，this.state）；//获取上一个值
这是我的国家({
选中：event.target.value
});
}
render（）{
返回(
第一个单选按钮


第二个单选按钮
);
}

}

它在我的机器上运行得很好。

请试试这个。 类应用程序扩展了React.Component{

constructor(props) {
    super(props);
    this.state = {
        checked: ""
    };
}

handleChange = (event) => {
    console.log("this.state", this.state); // Gets previous value
    this.setState({
      checked: event.target.value
    });
}

render() {

    return (
        <div className="wrapper">
            <input name="radioValue" type="radio" value="aaa"
                checked={this.state.checked === 'aaa'}
                onChange={this.handleChange} />
                First Radio Button
            <br />
            <input name="radioValue" type="radio" value="bbb"
                checked={this.state.checked === 'bbb'}
                onChange={this.handleChange} />
                Second Radio Button
        </div>
    );
}

构造函数（道具）{
超级（道具）；
此.state={
勾选：“”
};
}
handleChange=（事件）=>{
console.log（“this.state”，this.state）；//获取上一个值
这是我的国家({
选中：event.target.value
});
}
render（）{
返回(
第一个单选按钮


第二个单选按钮
);
}

}

---

它在我的机器上运行得很好。

我没有看到任何问题-太奇怪了！也许这只发生在浏览器上？好吧，现在我明白问题了。在您的代码中，您正在控制台上记录“值”，但现在我正在尝试记录“this.state”或“this.state.radioValue”

console.log（“this.state”，this.state）

在返回之前将您的控制台置于渲染中，然后您将获得更新的值我没有看到问题-太奇怪了！也许这只发生在浏览器上？好吧，现在我明白问题了。在您的代码中，您正在控制台记录“值”，但现在我正在尝试记录“this.state”或“this.state.radioValue”

console.log（“this.state”，this.state）

在返回之前将控制台置于渲染中，这样您将获得更新的值