Question

设置后是否无法立即获得更新的挂钩值？我假设react只更新下一个渲染的值，因为我的async-await之后的屏幕效果很好。只是日志没有打印出我期望的状态。

不确定我是要记录这样的状态，还是只为需要的状态编写另一个useEffect，然后将console.log放在那里？

const [uid, setUID] = useState<string | undefined>(undefined);
const [state, setState] = useState<{ [key: string]: any; } | undefined>();

const load = async () => {
  const currentUID = auth().currentUser?.uid;
  setUID(currentUID);

  console.log(uid); // returns undefined
  console.log(currentUID); // this prints fine

  await firestore().collection('users').doc(currentUID).get().then(docSnapshot => {
    setState(docSnapshot.data());
    console.log('Profile: loaded', state); // returns undefined
  });

  console.log(uid); // returns undefined even after await
  console.log('Profile: loaded', state); // returns undefined even after await
}

useEffect(() => { 
  load();
}, []);

Answer 1

状态更新在内部是异步的，这意味着状态设置器调用（来自setState()的{{1}}或用于类组件的useState）不会返回承诺。这意味着在其上调用await不会做任何事情，并且await调用之后的同步逻辑将在状态更新之前仍然运行。

所以有个解决方法

this.setState()

或类组件提供回调。

// Either log it directly in the body of the function console.log(state); // ...Or in a useEffect call useEffect(() => { console.log(state); }, [state]); const handleEvent = e => { setState(e.target.value); }

使用异步设置后，React hooks状态不会立即更新

1 个答案: