Обновление списка после запроса реагирует на хуки

Question

У меня есть список предметов, хранящихся в состоянии. После отправки формы я добавляю еще один элемент в список, а затем сохраняю его как новое состояние. Этот недавно добавленный элемент имеет статус «в ожидании». В то же время я отправляю почтовый запрос, и если почтовый запрос не выполняется, я хочу обновить статус этого конкретного элемента на «ошибка». Проблема в том, что состояние не обновляется к моменту сбоя запроса, и поэтому я пытаюсь обновить состояние, которое не установлено. Я использую перехватчики реагирования, поэтому одна возможность состоит в том, чтобы вызывать запрос только после обновления состояния:

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