尝试使用 React js 访问数组中的对象时出现错误 gen[0] 未定义

Question

我目前在尝试访问从 PokeApi 提取的数组中的对象时遇到问题
这是我的抓取 API，效果很好：

const [gen, setGen] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        axios
        .get("https://pokeapi.co/api/v2/generation")
        .then((res) => {
            return res.data.results;
        })
        .then((results) => {
            return Promise.all(results.map((res) => axios.get(res.url)));
        })
        .then((results) => {
            setLoading(false);
            setGen(results.map((res) => res.data));
        });
    }, []);

    console.log(gen);

这是我要显示的部分内容：

<h2 className='gen_container_inner_title'>{gen[0].name}</h2>
<h3 className='gen_container_inner_region'>{gen[0].main_region.name}</h3>

我还用同样的方法从另一个 API URL 获取了另一个

问题是有时它可以工作并显示所需的信息，但有时它会说

gen[0] is undefined

我不知道我做错了什么以及为什么每次都不起作用

编辑：代码 nt 工作在里面：

{loading ? (
  <BarWave width="40px" height="20px" color="#cc0000" />
  ) : (

Answer 1

您的 gen 数组在第一次呈现时可能没有项目。您可以使用 optional chaining operator(?.) along with nullish coalescing operator(??) 来消除错误。

<h2 className='gen_container_inner_title'>{gen?.[0]?.name ?? ""}</h2>
<h3 className='gen_container_inner_region'>{gen?.[0]?.main_region?.name ?? ""}</h3>

尝试使用 React js 访问数组中的对象时出现错误 gen[0] 未定义

Error gen[0] is undefined when trying to access an object in an array with React js

reactjs

pokeapi