Javascript 为什么我的单选按钮的checked属性在状态更改时保持不变（React）

我是个新手，在其他与我的问题相关的帖子中找不到解决方案

我正在构建一个简单的页面，其中显示一组四个无线电输入，以选择要注册的用户类型。问题在于我相信对各州的处理

import React, { Component/*, useEffect*/ } from 'react'


export default class CreateUser extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      clasificacion: "",
      rol: ""
    };
  }
  setClasificacionRadio = (e) => {
    console.log(e.currentTarget);
    this.setState({clasificacion: e.currentTarget.value}, 
      ()=>{
        console.log("clasificacion: "+this.state.clasificacion);
      }
    );    
  }
  setRolRadio = (e) => {
    console.log(e.currentTarget);
    this.setState({rol: e.currentTarget.value}, 
      ()=>{
        console.log("Rol: "+this.state.rol);
      }
    );
  }
  render() {
    return (
      <div className="container">
        <div className="row mt-3">
          <div className="col-12 col-md-12">
            <h3 className="text-center font-weight-bold">Registro de Usuarios</h3>
          </div>           
        </div>
        <div className="row mt-5">
          <div className="col-12 col-md-12">
            <h4 className="text-center font-weight-bold">Seleccione la Clasificación del Usuario</h4>
          </div>           
        </div>
        <div className="row mt-2">
          <div className="col-12 col-md-6 offset-md-3">
            <div className="input-append">
              <div className="btn-group pull-left" data-toggle="buttons">
                <label className="">Empleado</label>
                  <input type="radio" name="clasif" className='form-check' value="btn1"
                    onChange={this.setClasificacionRadio} 
                    checked={this.state.clasificacion === "btn1"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />
                <label className="">Institución</label>
                  <input type="radio" name="clasif" className='form-check' value="btn2"
                    onChange={this.setClasificacionRadio} 
                    checked={this.state.clasificacion === "btn2"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />

                <label className="">Socio</label>
                  <input type="radio" name="clasif" className='form-check' value="btn3"
                    onChange={this.setClasificacionRadio} 
                    checked={this.state.clasificacion === "btn3"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />

                <label className="">Obra Social</label>
                  <input type="radio" name="clasif" className='form-check' value="btn4"
                    onChange={this.setClasificacionRadio} 
                    checked={this.state.clasificacion === "btn4"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />
              
              </div>
            </div>
          </div>           
        </div>
        <div className="row mt-5">
          <div className="col-12 col-md-12">
            <h4 className="text-center font-weight-bold">Seleccione el Rol del Usuario a Crear</h4>
          </div>           
        </div>
        <div className="row mt-2">
          <div className="col-12 col-md-6 offset-md-3">
            <div className="input-append">
              <div className="btn-group pull-left" data-toggle="buttons">
                <label className="">Administrador</label>
                  <input type="radio" name="rol" className='form-check' value="ROL1"
                    onChange={this.setRolRadio} 
                    checked={this.state.rol === "ROL1"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />
                <label className="">Facturador</label>
                  <input type="radio" name="rol" className='form-check' value="ROL2"
                    onChange={this.setRolRadio} 
                    checked={this.state.rol === "ROL2"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />

                <label className="">Usuario de Carga</label>
                  <input type="radio" name="rol" className='form-check' value="ROL3"
                    onChange={this.setRolRadio} 
                    checked={this.state.rol === "ROL3"}
                    style={{marginTop: 15, marginLeft: 5, marginRight: 20}}
                  />
              
              </div>
            </div>
          </div>           
        </div>
        <div className="row mt-5">
          <div className="col-12 col-md-4 offset-md-4">
            <button id="" className="btn btn-outline-dark btn-block">
              Continuar
            </button>
          </div>
        </div>
      </div>
    )
  }
}

即使状态更改，单选按钮的“选中”属性仍保持不变，因此永远不会选择单选按钮

编辑

更新后将开关置于setState回调中，以便按照@Dhruvi Makvana的建议正确显示状态更改

问题仍然存在，单选按钮保持未选中状态，但单击它们会在控制台中显示状态更改

编辑2

我添加了第二行的4个单选按钮，它有自己的比较、状态和功能。我意识到只有当我单击第二行的单选按钮时，第一行的单选按钮才会更新，反之亦然，我还意识到选中的atribute不会根据setState的异步调用相应地更新。上面的代码已更新以显示这些更改

在这一点上，我想我也许应该改变这篇文章的标题“建议”

编辑3

我像@Vimal Patel一样在沙箱中运行更新的代码，它运行得很好，我不知道如何调试这个问题。

---

沙盒：

this.setState是异步的，这意味着它不保证在下一行中更新状态。尝试在另一个函数中移动开关盒，或将其放入setState回调。

Typo。onChange={this.setClasificacionRadio}。您丢失了，需要是onChange={this.setClasificacionRadio}。嘿，语法是正确的。SetState不会立即更新。我在这里创建了一个沙箱。工作很好。请检查我能在这个代码库中看到相同的问题。@VimalPatel是的，我能看到它在那里工作得很好，你对代码做了任何更改吗？我的仍不工作。是的，我通过将开关放在setState的回调处来更正开关，它现在显示当前状态更新，问题仍然存在。我可以在控制台中看到状态更改，但单选按钮不会更改其选中属性。您能试着将值更改为btn1、btn2吗。。和比较。所以最初在将无线电值更改为btn-1，btn2。。正如建议的那样，没有任何变化，但后来我尝试了一些东西，我添加了第二行的4个单选按钮，带有它自己的比较、状态和功能。我意识到第一行本身并没有更改选中的属性，我需要从第二行单击一些单选项，以便更新选中的属性。我将用这些更改更新我的代码。这不应该这么难。