Можно ли инициализировать состояние компонента данными API перед первоначальным монтированием компонента?
В моем приложении для реагирования я хотел бы инициализировать состояние моего компонента, используя данные API. Один из возможных способов — сделать вызов API в useEffect(), а затем установить состояние после вызова API, но это произойдет после первоначального монтирования компонента.
Мне просто интересно, есть ли другие способы инициализировать состояние перед первоначальным монтированием компонента? Вот что я пробовал, и это не работает.
async function getAns() {
let output = [];
//make api calls and assign data to output
//.......
return output;
};
const [playersList, setPlayersList] = useState(getAns());
Большое спасибо за любой совет!
Вы можете сделать это в родительском компоненте и передать его как реквизит.
Есть ли конкретная проблема, которую вы пытаетесь решить, или вы просто интересуюсь, если что-то возможно? Короткий ответ: да, можно инициализировать состояние компонента данными API. В принципе, можно инициализировать состояние компонента с помощью значения Любые, которое вам нравится. Очень распространен шаблон React для использования хука useEffect для отправки вызовов для получения данных, которые хранятся в локальном состоянии компонента.
Ответы 1
Вы можете использовать async-await со своей функцией и загружать компоненты только тогда, когда в состоянии есть данные ответа от вашего вызова API.
import React,{useState, useEffect} from 'react';
const Component = () => {
const [playerList, setPlayerList] = useState();
async function getAns(){
let output = await //make api calls and assign data to output
return setPlayerList(output);
};
useEffect(() => {
getAns();
}, [])
return (
{playerList && (
// Component jsx elements
)}
)
}
export default Component;
Вы можете обернуть свой компонент в другой компонент, который вызывает вызов API и условно отображает этот компонент.