React嵌套axios post请求内setState赋值后activeId为null问题

你遇到的现象本质是两个核心机制共同导致的，setActiveId本身是正常执行的，只是你读取值的时机和位置不对：

• 第一，React的setState是异步批处理逻辑，调用状态更新函数不会立刻修改当前渲染闭包内的状态值，必须等组件完成下一次重渲染，新的状态值才会在新的作用域中生效。
• 第二，axios请求是异步微任务，你在handleSaveAll中同步调用save1()时，save1内部的get、post请求都还没返回，setActiveId根本还没执行，就已经同步跑完了save2()和后续的打印逻辑，自然拿不到更新后的值。

实际执行顺序如下：

1. 触发handleSaveAll，调用save1()发起get请求，把请求回调塞进异步队列，save1直接同步返回
2. 立刻调用save2()，此时post请求还未返回，setActiveId未执行，打印当前闭包内的初始值null
3. 立刻执行handleSaveAll内的打印逻辑，同样拿到闭包内的旧值null
4. 等所有同步代码执行完毕，网络请求陆续返回，才会执行post的回调触发setActiveId，组件重渲染后activeId才会变成接口返回的10，但此时你之前写的打印逻辑早就执行完了。

另外你的代码还有个小隐患：按钮写的是type='submit'，如果外层包裹了表单标签，点击会触发表单默认提交刷新页面，非表单提交场景建议改成type='button'避免异常。

方案1：async/await 串行执行+直接传值（优先推荐） #

异步流程不要依赖状态更新做跨函数传值，直接把接口返回的id作为参数传递给后续逻辑，从根源避开闭包陷阱：

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

// 监听activeId变化，处理依赖新状态的逻辑
useEffect(() => {
  if (activeId) {
    console.log('状态更新完成，activeId =', activeId);
  }
}, [activeId]);

const save1 = async () => {
  // 等待get请求完成
  await axios.get(api1, getDefaultHeaders());
  const data = { item1: item1 };
  // 等待post请求完成，拿到返回结果
  const res = await axios.post(api2, data, getDefaultHeaders());
  const newId = res.data.id;
  setActiveId(newId);
  // 直接把拿到的id返回给调用方
  return newId;
};

const save2 = (currentId) => {
  console.log('save2拿到最新id =', currentId);
  // 后续逻辑直接使用传入的currentId即可，不要读取闭包内的旧状态
};

const handleSaveAll = async () => {
  // 等save1请求执行完毕拿到id，再执行save2
  const newId = await save1();
  save2(newId);
};

return (
  <button type='button' onClick={handleSaveAll}>Save</button>
);

方案2：useEffect监听状态变化触发后续逻辑 #

如果后续逻辑必须等状态更新写入组件后再执行，可以把后续逻辑放到useEffect的监听回调中，通过状态标记控制执行时机：

const [activeId, setActiveId] = useState(null);
const [saveProgress, setSaveProgress] = useState(0); // 标记保存流程进度

useEffect(() => {
  // 第一步保存完成、activeId已更新时，执行第二步逻辑
  if (saveProgress === 2 && activeId) {
    console.log('状态更新完成，activeId =', activeId);
    // 此处写save2的业务逻辑
    setSaveProgress(0); // 重置进度标记
  }
}, [activeId, saveProgress]);

const save1 = () => {
  axios.get(api1, getDefaultHeaders())
    .then(() => {
      const data = { item1: item1 };
      axios.post(api2, data, getDefaultHeaders()).then((res) => {
        setActiveId(res.data.id);
        setSaveProgress(2); // 标记第一步完成，触发useEffect执行后续逻辑
      });
    });
};

const handleSaveAll = () => {
  setSaveProgress(1);
  save1();
};

return (
  <button type='button' onClick={handleSaveAll}>Save</button>
);

注意：永远不要在调用setState之后，立刻读取当前函数作用域内的同名状态变量，这个值永远是当前渲染闭包保留的旧值，不会因为调用了状态更新函数就同步改变。

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