为什么 state 变量的值没有更新？

Question

I've got function component with displayProfileID function inside:

const [comments, setComments] = useState([]);
const [triggerUpdate, setTriggerUpdate] = useState(Math.random());


const displayProfileID = id => {
...
...

  try {
    axios.get(url).then(resp => {
      if (resp.data.status === "success") {
      ...
      ...
      const obj = resp.data.comments; // <-- receiving an array of objects
      setComments(obj);  // <-- changing state value
      setTriggerUpdate(Math.random()); // <-- forcing update of state variables
      console.log(comments);  //  <-- change isn't reflected ???
    }
  });
} catch (e) {
  console.log(e);
}

};

This is the only function I'm having issue with. State variable isn't changed despite triggering component rerender with Math.random() .

Thank you for any pointers.

Answer 1

setState is not synchronous. The console.log is logging the value before it has changed (or, more accurately, it has not, and will not change, you'll get a new one—possibly—next render).

If you are rendering the content then it should update after you call that setState . The setTrigger things seems unnecessary.

When you say "I've got function in my component", where? This is a function component? Hooks work in function components, not class ones. So hopefully this code is in a functional component.