React中Context传递UID为何先输出Undefined再显示正确值？

我通过Context API从App.js的状态变量向User.js组件传递AllmightyUID（示例值为2），但在User组件中打印该值时会执行两次：第一次显示undefined，第二次才显示正确数据2。就算用setTimeout延迟2-3秒打印，问题依旧存在，这导致后续API调用报错（提示无法读取undefined值）。

已尝试的解决方案 #

• 从index.js中移除Strict Mode
• 将值以Props形式传递，问题仍未解决

代码示例 #

import React, { useContext, useState } from 'react'
import { AllMightyUID } from '../App'
import axios from 'axios'

const User = (props) => {
  
  let receivedUID = useContext(AllMightyUID)
  
  const [UID1, setUID1] = useState();
  

  setTimeout(() => {
     
    console.log(receivedUID);

  }, 2000);

  return(
    <></>
  )
}

解决方案 #

问题根源在于组件初始渲染时，Context中的AllmightyUID还未完成赋值，所以第一次拿到的是undefined；当Context的值更新后，组件会重新渲染，此时才能拿到正确的2。而你用setTimeout的方式无效，是因为每次组件渲染都会创建一个新的定时器，第一次渲染的定时器捕获的是当时的undefined闭包值，即便后续Context更新，这个定时器里的receivedUID依然是之前的undefined，最终会打印两次（一次来自初始渲染的定时器，一次来自更新后渲染的定时器）。

正确的处理方式是用useEffect监听receivedUID的变化，只有当它存在有效值时再执行打印或API调用：

import React, { useContext, useState, useEffect } from 'react'
import { AllMightyUID } from '../App'
import axios from 'axios'

const User = (props) => {
  
  const receivedUID = useContext(AllMightyUID)
  
  useEffect(() => {
    // 只有当receivedUID存在时才执行后续操作
    if (receivedUID) {
      console.log(receivedUID);
      // 在这里进行API调用
      axios.get(`/api/user/${receivedUID}`)
        .then(res => {
          // 处理返回数据
        })
        .catch(err => {
          // 处理错误
        });
    }
  }, [receivedUID]); // 依赖项设为receivedUID，当它变化时触发effect

  return(
    <></>
  )
}

这样设置后，只有当receivedUID从undefined变为2时，useEffect才会执行，避免了初始阶段的undefined问题，同时也不会重复执行无效的API调用。

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