无法在React中的嵌套Axios Post请求中固定

Question

我正在尝试从嵌套的axios.post调用访问res.data.id，并将其分配给'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中设置状态就像异步函数。
这意味着当您设置状态并在其示例中，console.log函数在状态实际完成更新之前运行时，请立即设置状态并放置console.log 。

这就是为什么我们具有使用的原因，这是一个内置的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>
)