React JS SetState在嵌套Axios柱中不起作用

Question

我正在尝试从嵌套的axios.post调用访问res.data.id，并将其分配给'activeId'变量。我在按钮点击事件上调用handlesaveall（）函数。单击按钮时，当我安装“ res.data.id”时，它正确返回值，但是当我安装'activeId'时，它返回null，这意味着无法分配“ res.data.id” 。 我只需要将“ res.data.id”的值分配给'metricid'，这样我就可以在其他函数（例如save2（）function的其他函数中使用它。 有人有解决方案吗？提前致谢

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

代码运行同步的这一部分

const handleSaveAll = () => {
  save1();
  save2();

  console.log(activeId); // result: again its still null
};

，但是在那里您

axios.get(api1, getDefaultHeaders())
        .then(() => {

可以将代码重构为异步/等待这样的代码：

const save1 = async () => {
      const response = await axios.get(api1, getDefaultHeaders());
      const response2 = await axios.post(api2, { item1: response.data.item1 }, getDefaultHeaders());
      return response2.data.id;
};

const save2 = (activeId) => {
  console.log(activeId); // result: null
};

const handleSaveAll = async () => {
  const activeId = await save1();
  save2(activeId);
  setActiveId(activeId);
  console.log(activeId); // result: again its still null
};

或这样的承诺链，如下：

const save2 = (activeId) => {
  console.log(activeId); // result: null
};

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

const handleSaveAll = () => {
  save1()
    .then((res) => {
      setActiveId(res.data.id);
      console.log(res.data.id); // result: e.g. 10
      return res.data.id;
    })
    .then(save2);
};