React嵌套axios post请求中setState赋值后取值为null问题

activeId始终打印null本质是两个时序问题，属于React状态机制+异步逻辑的常见踩坑点：

1. React的状态更新是异步批处理的：调用setActiveId不会同步修改当前函数闭包里的activeId值，新值要等下一次组件重渲染之后，才会在新生成的函数闭包里生效
2. 现有代码执行顺序完全不对：点击按钮触发handleSaveAll时，save1()里的axios是异步网络请求，调用save1()只是发起请求，不会等请求返回就会立刻往下执行save2()和控制台打印——这时候请求还没拿到响应，setActiveId根本还没执行，自然读不到更新后的值。
   另外你当前嵌套写axios的方式存在Promise链断裂问题，内部的post请求没有return，外层没法等待它执行完成，请求异常也没法向外抛出统一捕获。

方案1：通过Promise链直接传值（最推荐，无闭包时序问题） #

不要依赖状态更新做跨函数传值，直接把接口返回的id通过Promise链传递给后续逻辑，从根源上避开状态异步更新的时序问题，改造后代码如下：

const [activeId, setActiveId] = useState(null);

// save1返回Promise，把拿到的idresolve出去
const save1 = () => {
  return axios.get(api1, getDefaultHeaders())
    .then(() => {
      const data = {item1: item1};
      // 必须return内部post请求，打通Promise链
      return axios.post(api2, data, getDefaultHeaders())
    })
    .then((res) => {
      const newId = res.data.id;
      setActiveId(newId);
      console.log('save1拿到的id:', newId);
      return newId;
    });
};

// save2改为接收id参数，不直接读闭包里的旧状态
const save2 = (id) => {
  console.log('save2拿到的id:', id);
  // 后续业务逻辑直接用传入的id即可
};

const handleSaveAll = async () => {
  // 等待save1所有请求执行完，拿到返回的id
  const newActiveId = await save1();
  // 把id传给save2使用
  save2(newActiveId);
};

return (
  // 非表单提交场景建议用type='button'，避免submit触发默认页面跳转
  <button type='button' onClick={handleSaveAll}>Save</button>
);

如果习惯写同步风格代码，也可以把save1、handleSaveAll里的Promise链式调用改成async/await写法，逻辑更直观，也方便统一加try/catch做错误处理

方案2：监听状态变化触发后续逻辑（适合状态需要全局共享的场景） #

如果activeId需要在组件多个地方共享使用，可以通过useEffect监听activeId变化，等状态更新完成后再执行依赖它的逻辑：

const [activeId, setActiveId] = useState(null);

const save1 = () => {
  axios.get(api1, getDefaultHeaders())
    .then(() => {
      const data = {item1: item1};
      axios.post(api2, data, getDefaultHeaders()).then((res) => {
        setActiveId(res.data.id);
      });
    });
};

const save2 = () => {
  console.log('状态更新后拿到的activeId:', activeId);
};

// 监听activeId变化，当它从初始null变成有效值时触发save2
useEffect(() => {
  if (activeId !== null) {
    save2();
    // 如果只需要首次拿到id时执行一次，可以在这里加逻辑重置或者加标记位避免重复触发
  }
}, [activeId]);

const handleSaveAll = () => {
  // 只需要触发save1，等状态更新后useEffect会自动调用save2
  save1();
};

注意：这个方案需要额外处理重复触发问题，如果后续其他业务逻辑也会修改activeId，会导致save2被意外执行，需要自己加判断条件区分触发来源。

• 永远不要在调用setState之后，立刻在同一个函数执行上下文里读取同一个状态变量，拿到的永远是闭包里缓存的旧值，这是React的设计特性不是bug
• 嵌套写异步请求时一定要保证Promise链完整，不然会出现请求没法await、异常捕获不到的问题
• 所有axios请求建议加catch分支处理报错，避免接口异常时出现未捕获的Promise错误。

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