React中提取API响应id存入useState后状态仍为空的问题

• React状态更新的异步机制导致打印值不符
  调用setUserId(user_id)后，当前执行上下文里的userId变量仍然是初始的空字符串值。React的状态更新不会同步修改当前闭包内的变量，会等待组件重新渲染时，才会生成新的userId值供后续逻辑使用。你在set操作后立刻打印userId，拿到的永远是本次渲染周期捕获的旧值，并非接口返回的最新值。
• 请求执行存在依赖顺序与闭包陷阱问题
  两个异步请求都在首次渲染的执行上下文中调用，getMyCalendarId内部引用的userId同样是初始空字符串，即便给getMyCalendarId补上执行的括号，发出的请求路径也会是/cal/calendars，因为此时setUserId还未触发组件重渲染，getMyCalendarId根本拿不到更新后的userId值。另外原代码中写的getMyCalendarId没有加括号，本身就不会被执行。

1. 调整打印验证逻辑
   想确认接口返回的id是否正确，直接打印从响应中解析出的本地临时变量即可，不要在set操作后立刻打印state值：

   const getMyUserId = async () => {
     const { data: objects } = await axios.get("/"); 
     const user_id = objects.objects[0].id.toString(); 
     console.log("接口返回的userId值", user_id); // 此处可拿到准确的转换后的字符串id
     setUserId(user_id);
   };
   

   如需验证state是否成功更新，单独添加监听userId的副作用即可：

   useEffect(() => {
     if (userId) console.log("state存储的最新userId值", userId);
   }, [userId])
   

2. 打通两个请求的依赖链路
   不要依赖全局state在两个请求函数间传值，state的异步更新特性天然容易引发闭包陷阱。可以直接将第一个请求拿到的id作为参数传入第二个请求函数：

   // 接收外部传入的userId，不依赖组件state闭包
   const getMyCalendarId = async (currentUserId: string) => {
     const url = `/${currentUserId}/cal/calendars`;
     const { data: objects } = await axios.get(url);
     const calendar_id = objects.objects[0].id.toString();
     setCalendarId(calendar_id);
   };
   

   在初始化的副作用中按顺序串行执行两个请求，等第一个请求拿到id后再触发第二个请求：

   useEffect(() => {
     const initPageData = async () => {
       const { data: userRes } = await axios.get("/"); 
       const user_id = userRes.objects[0].id.toString(); 
       setUserId(user_id);
       // 直接把解析出的id传给第二个请求，避免闭包拿不到最新值的问题
       await getMyCalendarId(user_id);
     };
     initPageData();
   }, []);
   

3. 补充可选的state驱动请求写法
   如果希望通过state驱动第二个请求的执行，必须给对应的副作用补上依赖，等state值更新后再触发请求：

   useEffect(() => {
     // 等userId有有效值后再发请求
     if (!userId) return;
     const fetchCalendar = async () => {
       const url = `/${userId}/cal/calendars`;
       const { data: objects } = await axios.get(url);
       const calendar_id = objects.objects[0].id.toString();
       setCalendarId(calendar_id);
     };
     fetchCalendar();
   }, [userId])
   

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