不能在react中嵌套的axios post请求中设置状态

Question

我试图从嵌套的axios访问res.data.id。post调用并将其分配给'activeId'变量。我在按钮单击事件上调用handleSaveAll()函数。当按钮被点击，当我控制台的'res.data。Id'，它正确地返回值，但当我控制'activeId'时，它返回null，这意味着'res。data 'Id '不能被分配。有人有解决办法吗?提前感谢

const [activeId, setActiveId] = useState(null);
useEffect(() => {}, [activeId]);
const save1 = () => {
axios.get(api1, getDefaultHeaders())
.then(() => {
const data = {item1: item1,};
axios.post(api2, data, getDefaultHeaders()).then((res) => {
setActiveId(res.data.id);
console.log(res.data.id); // result: e.g. 10
});
});
};
const save2 = () => {
console.log(activeId); // result: null
};
const handleSaveAll = () => {
save1();
save2();
console.log(activeId); // result: again its still null
};
return (
<button type='submit' onClick={handleSaveAll}>Save</button>
);

Answer 1

在React中设置状态就像一个async函数。
这意味着当您设置状态并在其后面放置console.log时，就像在您的示例中一样，console.log函数在状态实际完成更新之前运行。

这就是为什么我们有useEffect，一个内置的React钩子，当它的一个依赖项发生变化时激活一个回调。

例子:

useEffect(() => {
console.log(activeId);
}, [activeId);

回调将在每次状态值改变时运行，并且只有在它完成改变并且渲染发生后才会运行。

---

编辑:

根据评论中的讨论。

const handleSaveSections = () => {
// ... Your logic with the `setState` at the end.
}
useEffect(() => {
if (activeId === null) {
return;
}
save2(); // ( or any other function / logic you need )
}, [activeId]);
return (
<button onClick={handleSaveSections}>Click me!</button>
)

Answer 2

由于setState是一个异步任务，因此您不会直接看到更改。如果希望查看axios调用后的更改，可以使用以下代码:

axios.post(api2, data, getDefaultHeaders())
.then((res) => {
setActiveId(res.data.id)
console.log(res.data.id) // result: e.g. 10
setTimeout(()=>console.log(activeId),0);
})

useEffect(() => {
}, [activeId]);
const [activeId, setActiveId] = useState(null);
const save1 = () => {
const handleSaveSections = async () => {
activeMetric &&
axios.get(api1, getDefaultHeaders()).then(res => {
if (res.data.length > 0) {
Swal.fire({
text: 'Record already exists',
icon: 'error',
});
return false;
}
else {
const data = {
item1: item1,
item2: item2
}
axios.post(api2, data, getDefaultHeaders())
.then((res) => {
setActiveId(res.data.id)
console.log(res.data.id) // result: e.g. 10
})
}
});
}
handleSaveSections()
}
const save2 = () => {
console.log(activeId);   //correct result would be shown here
}
const handleSaveAll = () => {
save1();
save2();
}

return (
<button type="submit" onClick={handleSaveAll}>Save</button>
)