React挂钩：使用useEffect时无法获取状态更新

Question

I'm having an issue when mixing useState and the useEffect hook. I can't seem to reference the new query state in onReady() .

function Foo() {
  const [ query, setQuery ] = React.useState('initial query');

  React.useEffect(() => {
    myLibClient.onReady(onReady)
  }, []);

  function onReady() {
    const newQuery = myLibClient.createQuery({ options });
    setQuery(newQuery);
    console.log(query); // initial query :(
  }

  return null;
}

Can anyone see what I'm doing wrong or explain why this doesn't work?

Answer 1

The issue here is that like this.setState in the class-based react components, the setQuery function also sets the state asynchronously.

See Reference react docs and RFC: Why it is asynchronous?

So if you try to access the value just after setting the state, you'll get the older value.

You can verify this behavior here. https://codesandbox.io/s/2w4mp4x3ry . (See the file named Counter.js) You'll see that before and after values for counter are same.

If you want to access the updated value, you can access it in the next render cycle. I have created another example where you can see that new query value is being rendered.

https://codesandbox.io/s/8l7mqkx8wl (See the file named Counter.js)