Данные массива не отображаются, даже если консоль показывает данные
У меня есть небольшая проблема, которую я не могу решить. Я извлекаю данные из Pokeapi, чтобы вернуть покемонов, затем перебираю эти данные, чтобы инициировать другой запрос на выборку, чтобы вернуть связанные данные с данным покемоном.
Я хочу передать эти данные в массив, чтобы я мог запускать этот запрос по мере загрузки приложения и сохранять данные в хранилище, чтобы не было необходимости делать новые запросы. Однако ... (чего я еще не сделал, кстати)
Я console.info результаты и данные есть, но при попытке отобразить данные, нада.
Пожалуйста, смотрите мою попытку ниже:
export function SomeComponent() {
let arr = [];
async function fetchPokemon() {
const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
.then(response => response.json())
for await (const x of pokemon.results.map(async (result) => await fetch(result.url)
.then(response => response.json()))) {
arr.push(x);
}
}
fetchPokemon();
console.info(arr)
return (
<>
{arr.map((pokemon) => (
<p>
{pokemon.name}
</p>
))}
</>
)
}
Мое лучшее предположение заключается в том, что консоль отображает результаты в реальном времени, а данные на самом деле еще не заполнены?
Я бы хотел, чтобы имена покемонов отображались в
ярлык.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В реакции мы должны использовать состояние для хранения данных и useEffect для выполнения действий с побочными эффектами, таких как выборка данных:
export function SomeComponent() {
const [arr, setArray] = useState([]);
async function fetchPokemon() {
const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
.then(response => response.json())
for await (const x of pokemon.results.map(async (result) => await fetch(result.url)
.then(response => response.json()))) {
setArray([...arr, x]);
}
}
useEffect(() => {fetchPokemon()}, []}
return (
<>
{arr.map((pokemon) => (
<p>
{pokemon.name}
</p>
))}
</>
)
}
Вы можете добавить, что useState вызывает повторный рендеринг. И именно поэтому это сработает.
Попробуйте это, {arr?.map((pokemon) =>...