当设置状态为异步时如何立即将变量的值存储在状态中

Question

I am new to react and am trying to store the value in state for customer my code for getting the value of the dropdown is this:

handleChangeCC = customercode => {
    this.setState({ customercode });

    // var customer = customercode.map(o => o.label);
    // this.setState({ customer });

    var customer1 = customercode.label;
    this.setState({ customer: customer1 });

    console.log(`Option selected1:`, this.state.customer);
    this.getCustomerName();

    // console.log("Rec2:" + document.getElementById("CustomerCode").innerText);
  };

I am running function this.getCustomerName() in this function, The code for that is this:

getCustomerName = () => {
    var Items = [];

    var code = this.state.customer;
    console.log('CustomerCode:' + code);
    axios.post('https://localhost:44303/api/observation/GetCustomerName?' + '&code=' + code).then(response => {
      //console.log('Value=' + response.data);
      console.log('Response=' + response.data);
      response.data.map(item => {
        var obj = new Object();

        // obj.label = desc;
        obj.label = item;

        Items.push(obj);
        //this.setState({ locations: response.data });
      });
      this.setState({ customerName: Items });

      console.log('customerName:' + this.state.customerName);
    });
  };

I am setting code= this.state.customer in the function getCustomerName which I am running just after this.setState({ customer: customer1 }); in handleChangeCC function.

However as this.setState is an async function it is not updating the state immediately as a result of which I am getting code as null and my getCustomerName function does not work

How do I get around This? Is there a way to get the variable value of one function to another function. Please help

Answer 1

I would pass the customercode into your getCustomerName() method, in this instance. setState will take a moment, so it's value won't be immediately available to your method. You would have to wait for the value to be in state and then call the method. By setting its' state and passing it to your method, you don't have to wait for the state update to complete.

Also, if you're just learning React I would look into using function based components instead of the legacy class components, if you have the option.

Answer 2

Yes, there are several techniques to get the latest value

2nd argument in setState

this.setState({ customerName: Items }, () => {
    console.log('latest value', this.state.customerName);
});

The second argument that can optionally be passed to setState is a callback function that gets called immediately after the setState is completed and the components get re-rendered.

More here

async methods

  updateA = async () => {
    this.setState({
      a: "test"
    });
    await (() => {})(); // or fetch or any async operation
    console.log(this.state.a);
  };

Do note this isn't recommended approach however current version of react supports it.