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

Question

我正在状态中存储一些数据。我首先调用 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();
};

Answer 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]);

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

Calling a function after updating the state more than 1 time

reactjs

use-effect

react-functional-component

use-state