Question

我有一份状态清单。提交表单后，我将另一个项目添加到列表中，然后将其另存为新状态。此新添加的项目的状态为“待处理”。同时，我发送一个发布请求，如果发布请求失败，我想将该特定项目的状态更新为“错误”。问题是，请求失败时状态不会被更新，因此我正在尝试更新未设置的状态。我正在使用react挂钩，因此一种可能性是仅在状态更新后才调用请求：

useEffect = (()=>{
    function getRequest(URL, id, freq) {
       request happens here
    }
}),[state])

以前，在将getRequest函数放入useEffect之前，它是由子组件中的另一个函数调用的。

我的问题包括几个部分： 1）我如何将参数URL，id，freq放入useEffect函数中？ 2）我不想在第一次渲染时运行getRequest函数，那么我该如何取反呢？ 3）是我在这里做事的一般模式（我敢肯定这并不难）。

Answer 1

如果您要确保要更新已添加到state的项目，那么确实做到同步的方法是使用useEffect。

但是，我添加了一个额外的state变量，它表示项目的数量。
然后，无论何时添加新项目，API请求都将执行，并且（现有）项目将相应地更新：

const [itemsAmount, setItemsAmount] = setState(0);
const [items, setItems] = setState([]);

function addItem(itemData) {
  const newItem = {
    ...itemData,
    status: 'pending',
  }
  setItems([...items, newItem]);
  setItemsAmount(itemsAmount + 1);
};

useEffect(async () => {
  try {
    // Execute the API call
    const response = await apiCall();
    if (resposne && response.data) {
      // Add the successfully updated version of the item
      newItem.status = 'done';
      newItems.data = response.data;
      setItems([...items, newItem]);
    }
  } catch (err) {
    // If the API call fails, add the "failed" version of the item
    newItem.status = 'failed';
    setItems([...items, newItem]);
  }
}, [itemsAmount]);

请求响应挂钩后更新列表

1 个答案: