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

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

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

Ранее, прежде чем помещать функцию getRequest в useEffect, она вызывалась другой функцией в дочернем компоненте.

Мой вопрос состоит из нескольких частей: 1) как мне получить параметры URL, id, freq в функции useEffect? 2) я не хочу запускать функцию getRequest при первом рендеринге, как я могу это отрицать? 3) - это моя общая схема ведения дел здесь хорошо (я уверен, что это не должно быть так сложно).


reactjs asynchronous use-state use-effect
person mdc29    schedule 09.04.2020    source источник
comment
Это не то, как вы используете функцию useState. Вы имели в виду useEffect?   -  person GalAbra    schedule 09.04.2020
comment
да, спасибо, только что отредактировал   -  person mdc29    schedule 09.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите убедиться, что обновляете элемент, который уже был добавлен в 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]);

person GalAbra    schedule 09.04.2020
comment
Это был порядок, в котором я что-то делал, дело в том, что я не могу обновить статус элемента в состоянии, потому что он не установлен. - person mdc29; 09.04.2020
comment
@ mdc29 Только что понял, о чем вы спрашивали, и соответственно обновил свой ответ. Извините за недопонимание - person GalAbra; 10.04.2020