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

Posted 2023-03-17

【中文标题】更新状态超过 1 次后调用函数

【英文标题】：Calling a function after updating the state more than 1 time

【发布时间】：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();
;

【参考方案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]);