如何使用渲染功能上方的更新状态值？

Question

I think it might be silly question to ask but trust me I am stuck to find an answer . Actually , I am trying to access updated state value in class function above render function but I am not getting updated value . when I console value in render function I got updated value . Could someone please help me how to access updated value .

Thanks

Code

fetchAgents = e => {
  this.setState({
    value: e.target.value
  });
};

fetchFilteredInventories = e => {
  axios
    .get(`/api/reports/agents/?branch=${this.state.value}`)
    .then(response => {
      this.setState({
        agents: response.data
      });
    });
};

when I try to access updated state value in fetchFilteredInventories I am getting null value . Could someone help me to achieve my goal

Answer 1

setState is asynchronous. When you console.log after setState, the state is not changed yet, it is in the process of changing. Try this

this.setState({
 value : e.target.value
 },()=>console.log(value));

You will see the value is updated. setState allows a callback function as arguement. So use the callback function to use the updated state value.

Read the docs for further info: https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

Answer 2

It depends on where you are calling your fetchFilteredInventories function.
After a state update in a React component certain lifecycle hooks get called, such as componentWillUpdate , componentDidUpdate . you can read about them in React docs here State and Lifecycle .
Make sure you are calling your API call function at the right moment.
If you can, put your whole component code here for better answers.

Answer 3

Try This

axios.get(`/api/reports/agents/?branch=${this.state.value}`).then(function(response) {
       this.setState({
            agents: response.data
          });
    }.bind(this));