React Hooks异步行为异常问题排查求助

问题原因拆解 #

1. useEffect中直接打印状态为null的原因 #

你在useEffect里调用了异步函数getProfile()，但没有等待它执行完成就立刻打印email、id、type。由于getProfile里的数据库请求、状态更新都是异步操作，此时状态还没被赋值，自然输出初始值null。

2. 同一个if块内设置状态后立刻打印仍为null的原因 #

React的状态更新函数（比如你用的setType）是异步执行的，调用它不会立刻修改当前作用域中的type变量，要等到组件下一次重新渲染时，状态才会更新。所以在setType(data.type)之后立刻console.log(type)，拿到的还是更新前的初始值null。

验证与修正建议 #

• 如果想在getProfile执行完成后查看状态，可以在useEffect里用async/await等待它：

  useEffect(() => {
    async function fetchData() {
      await getProfile();
      console.log(email, id, type); // 此时状态已更新，能拿到正确值
    }
    fetchData();
  }, []);
  

• 如果要在状态更新后执行逻辑，推荐用useEffect监听状态变化：

  useEffect(() => {
    console.log(type); // 每次type更新时都会触发
  }, [type]);
  

• 在getProfile的if块里，如果需要用到刚获取的数据，直接用data.type、data.email即可，没必要依赖刚设置的状态。

你的代码片段 #

useEffect(() => {
    getProfile()
    console.log(email)
    console.log(id)
    console.log(type)
  }, [])

  async function getCurrentUser() {
    const {
      data: { session },
      error,
    } = await supabase.auth.getSession()

    if (error) {
      throw error
    }

    if (!session?.user) {
      throw new Error('User not logged in')
    }

    return session.user
  }

  async function getProfile() {
    try {
      const user = await getCurrentUser()
      
      console.log(user.id);

      let { data, error, status } = await supabase
        .from('users')
        .select()
        .eq('uid', user.id)
        .single()
      console.log(data.type)

      if (error && status !== 406) {
        throw error
      }

      if (data) {
        console.log(data.type)
        setEmail(data.email)
        setType(data.type)
        setId(data.uid)
        console.log(type)
      }
      console.log(type)
    } catch (error: any) {
      alert(error.message)
  }

内容的提问来源于stack exchange，提问作者IVOBOT