如何在 React js 中立即更新状态值？答案

【问题标题】：How can I update state value immediately in React js?如何在 React js 中立即更新状态值？
【发布时间】：2020-10-20 08:57:23
【问题描述】：

我知道 setState 在异步函数中。但是如果我立即需要 state 的值，我怎样才能得到呢？这是我的代码

class OfficerPage extends Component {
    constructor(props) {
        super(props);
    
        this.state={
            counterList: [],
            currentCustomerValue: null,
            counterValue: null
        }
      }

      componentDidMount(){
        this.getAllCounters();
        this.getCurrentTicketId(this.state.counterValue) //cannot get value immidately
      }

      getAllCounters=()=>{
          API.getAllCounters().then((res) => {
            let allCounters=[];
            for(let i=0; i<res.length; i++){
              allCounters.push(res[i]);
            }
            this.setState({counterList: allCounters} )
         })
         .catch((err) => {
          this.setState({AuthErr : err.msg});
         });
        }


        getCurrentTicketId=(counterValue)=>{
            API.getCurrentTicketId(counterValue).then((res) => {
              this.setState({currentCustomerValue: res})
           })
           .catch((err) => {
            this.setState({AuthErr : err.msg});
           });
          }

          onChangeCounter = (event) => {
            console.log(event.target.value+" vall");
            this.setState({counterValue: event.target.value});
          };

问题是 onChangeCounter 值不会立即更新，它会在 2 次迭代后发生变化。我该如何解决这个问题？

【问题讨论】：

您正在访问componentDidMount 中的状态，其中counterValue 的值仍然是null。看起来您想像这样在onChangeCounter 中调用getCurrentTicketId 函数：this.setState({counterValue: event.target.value}, () => getCurrentTicketId(this.state.counterValue));
是的，它成功了，谢谢

标签： javascript reactjs

【解决方案1】：

类组件中的setState回调

也就是状态值更新后会执行的回调函数。并且您可以调用任何其他函数来获取最新的状态更新。

对于即：

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 0,
    };
  }
  
  // this.checkAge is passed as the callback to setState
  updateAge = (value) => {
    this.setState({ age: value}, this.checkAge);
// When the Age state has updated, this.checkAge will be executed without depending on the React render method.
  };

  checkAge = () => {
    const { age } = this.state;
    if (age !== 0 && age >= 21) {
      // Make API call to /beer
    } else {
      // Throw error 404, beer not found
    }
  };

  render() {
    const { age } = this.state;
    return (
      <div>
        <p>Drinking Age Checker</p>
        <input
          type="number"
          value={age}
          onChange={e => this.updateAge(e.target.value)}
        />
      </div>
    );
  }

}

export default App;

【讨论】：

【解决方案2】：

如果您不熟悉setState回调函数，也可以使用componentDidUpdate获取最新和更新的状态。

【讨论】：