更新状态超过 1 次后调用函数答案

【问题标题】：Calling a function after updating the state more than 1 time更新状态超过 1 次后调用函数
【发布时间】：2021-11-08 21:34:45
【问题描述】：

我正在状态中存储一些数据。我首先调用 1 个 API 并获取更新状态中的数据 3 次。数据更新后，我必须使用更新的状态数据调用另一个 API。我无法这样做。如果状态只更新一次，我会使用 useEffect。但是，这里它改变了 3 次。

const [data, setData] = useState(() => getDataInit());


const setDataKey = key => value =>
  setData(d => ({
    ...d,
    [key]: value,
}));

const postFn = () => {
  const response = await updateData({ body: data });
  onSave({
    response,
    widget,
    wrapperId,
  });
};

const resetFn = () => {
  const defaultData = await getDefaultData({
    query: { id: data.default_id },
  });
  setDataKey('quantity')(defaultData.quantity);
  setDataKey('name')(defaultData.name);
  setDataKey('amount')(defaultData.amount);
  postFn();
};

【问题讨论】：

标签： reactjs use-effect use-state react-functional-component

【解决方案1】：

您可以更新为只呼叫一个setData。所以你可以添加useEffect来调用postFn

const resetFn = () => {
  const defaultData = await getDefaultData({
    query: { id: data.default_id },
  });

  const newData = {
   quantity: defaultData.quantity,
   name: defaultData.name,
   amount: defaultData.amount,
  };

  setData((d) => ({
    ...d,
    ...newData,
  }));
}

useEffect(() => {
  postFn();
}, [data]);

【讨论】：