reactjs - 如何更新反应变量状态？

Question

我正在尝试更新变量“selectedPlayer”的状态，但是当我 setState 函数时，该变量的状态不会更新，我已经通过控制台日志对此进行了测试，如下所示。

下面是我如何尝试设置变量的状态和一些此类文件以供您了解

 this.setState({ selectPlayer: player });

这是我用来更新状态的一些组件文件和函数。

  class StatApp extends Component {
      constructor(props) {
        super(props);
        this.state = {

          selectedPlayer: 'dassdasda',

        };
        this.selectPlayer = this.selectPlayer.bind(this);
      }

    selectPlayer = e => {
        e.preventDefault();
        //  console.log(e.target.value); //will give you the value continue

        // Store Value
        const selectPlayer = this.state.selectedPlayer;
        console.log(this.state.selectedPlayer);

        console.log(selectPlayer);

        // Test to see if we are getting the value from the playerButton 
        const player = e.target.value;
        console.log(player);


        this.setState({ selectPlayer: player });

        console.log(selectPlayer);

      };

标签： reactjsreact-state-management

Answer 1

setState 是异步的，因此当您在控制台记录它时，状态尚未更新。您可以使用 setState 的回调形式来获取更新的状态：

this.setState(
    { selectPlayer: player },
    () => console.log(this.state.selectPlayer)
);