React Map函数不在浏览器上呈现，但它是console.logging

Question

我正在做一个React家庭作业，使用pokemon API。在这个特定的组件中，我访问API以返回所有口袋妖怪名称的列表并将它们呈现给浏览器。

我已经调用了API并将其映射出来，当我console.log这些名称时，它似乎可以工作，但我不确定我做错了什么，它没有渲染到实际的浏览器上，并且肯定可以使用一些帮助。代码:

import React, { useEffect, useState } from "react";
function PokedexHome(){
const [pokedexList, setPokedexList] = useState(undefined);
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
useEffect(() => {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0`)
.then(response => response.json())
.then(data => {
setPokedexList(data)
setIsLoading(false);
},
error => {
setHasError(true)
setIsLoading(false)
}
);
},[]);
if(isLoading){
return <p>Loading...</p>
}
if(hasError){
return <p>An error has occurred, please try again later</p>
}

pokedexList.results.map((pokemon) => {
console.log(pokemon.name)
return <div className="list-container">
<p>{pokemon.name}</p>
</div>

})
};


export default PokedexHome

Answer 1

如果你有一个列表，那么你的PokedexHome返回void:)

所以，首先，你在地图前丢失了一个return。

第二，(如果最近没有什么变化)你不能返回一个组件数组，你需要返回一个单一的组件，它可以是一个Fragment(一个没有UI表示的React组件，为此目的而创建)

return (
<>
{
pokedexList.results.map((pokemon) => {
console.log(pokemon.name)
return <div className="list-container">
<p>{pokemon.name}</p>
</div>

})
}
</>
)

Answer 2

您错过了pokedexList前面的return关键字。应该是这样的。并在返回

上添加()

return pokedexList.results.map((pokemon) => {
return (
<div className="list-container">
<p>{pokemon.name}</p>
</div>
)

})
};

Answer 3

你的组件需要返回一个JSX，所以添加返回和包裹你的列表与<></>。

import React, { useEffect, useState } from 'react';
function PokedexHome() {
const [pokedexList, setPokedexList] = useState(undefined);
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
useEffect(() => {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0`)
.then((response) => response.json())
.then(
(data) => {
setPokedexList(data);
setIsLoading(false);
},
(error) => {
setHasError(true);
setIsLoading(false);
},
);
}, []);
if (isLoading) {
return <p>Loading...</p>;
}
if (hasError) {
return <p>An error has occurred, please try again later</p>;
}
return (
<>
{pokedexList.results.map((pokemon) => {
console.log(pokemon.name);
return (
<div className="list-container">
<p>{pokemon.name}</p>
</div>
);
})}
</>
);
}

Answer 4

我能想到的最可能的问题是，您没有将整个JSX包在()圆括号中。它指定你想要返回一些东西。当然，main函数的返回语句

示例代码

试试这样包装。

return  pokedexList.results.map((pokemon) => (

<div className="list-container">
<p>{pokemon.name}</p>
</div>

))