Как обрабатывать полученные данные в useEffect

Question

Когда я пытаюсь обработать данные, поступающие из api, затем использую их для рендеринга, но я всегда go сталкиваюсь с проблемой asyn c, потому что функция процесса не ждет моих функций выборки.

const [fetchData1, setData1] = useState([]);
const [fetchData1, setData2] = useState([]);
const [processedData, setProcessedData] = useState([]);

useEffect(() => {
 const getData1 = async () => {
  //get data1 using axios
  //setData1(response)
 }
 const getData2 = async () => {
  //get data2 using axios
  //setData2(response)
 }
 getData1();
 getData2();
 setProcessedData(processData(fetchData1, fetchData2));
}, [])

const processData = (data1, data2) => {
 //process two data
 //return data;
}

Даже когда я пытаюсь обернуть две функции выборки и функцию обработки в асинхронную c функцию, но проблема остается той же.

(async () => {
  await getData1();
  await getData2();
  setProcessedData(processData(fetchData1, fetchData2));
})

Answer 1

Читая ваш вопрос, насколько я могу судить, вам не нужны fetchData1 и fetchData2, вам просто нужен processedData. Проблема с вашим текущим кодом заключается в том, что он использует значения по умолчанию fetchData1 и fetchData2 при вызове setProcessedData, он не использует форму результатов ax ios.

Подождите, пока оба обещания уладятся и используйте их результаты. См. Комментарии:

const [processedData, setProcessedData] = useState([]);

useEffect(() => {
    const getData1 = async () => {
        //get data1 using axios
        //setData1(response)
    };
    const getData2 = async () => {
        //get data2 using axios
        //setData2(response)
    };
    // *** Wait for both promises to be fulfilled
    Promise.all(
        getData1(),
        getData2()
    ).then([data1, data2]) => { // Get those results into parameters
        // *** Use the parameter values
        setProcessedData(processData(data1, data2));
    }).catch(error => {
        // handle/report error
    });
}, []);

// *** render using the current values in `processedData`

Обратите внимание, что, поскольку вы только делаете это при первом создании компонента, вам не нужно беспокоиться об его отмене, et c. , при изменении другого состояния в компоненте (если он имеет другое состояние). Если вызовы зависели от других данных состояния, которые вы перечисляли в массиве зависимостей, вам может потребоваться обработать, игнорируя более ранние результаты, если эти другие данные изменились во время вызовов ax ios. Но опять же, не с тем, что вы здесь делаете.

Answer 2

Promise.all предназначен для обработки нескольких операций asny c:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Вот еще примеры:

https://www.taniarascia.com/promise-all-with-async-await/