React中调用星球大战API遍历展示星球名称遇阻求助

你的代码存在几个关键问题，下面逐一说明并给出修正方案：

• 初始State类型错误
  你将data初始化为空字符串""，但星球大战API返回的是包含results数组的对象。请求完成后data变为对象，调用data.map会直接报错——对象没有map方法。应该将初始值设为空数组[]，匹配后续要存储的星球列表结构。

• useEffect无限循环
  你的useEffect未设置依赖数组，这会导致组件每次渲染都触发API请求，造成无限循环请求。添加空依赖数组[]，让它仅在组件挂载时执行一次。

• API数据结构处理错误
  API返回的响应中，星球列表实际在res.data.results字段里，而非直接返回数组。你需要将这个数组存入state，而非整个响应对象。

• 缺少列表key属性
  React列表渲染时要求每个元素有唯一key属性，否则会触发控制台警告，这里可以用星球名称作为唯一标识。

修正后的完整代码：

import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";

const AllPlanets = () => {
  // 初始化为空数组，匹配星球列表结构
  const [planets, setPlanets] = useState([]);

  useEffect(() => {
    axios
      .get(`https://swapi.dev/api/planets`)
      .then((res) => {
        // 存储results数组，而非整个响应对象
        setPlanets(res.data.results);
      })
      .catch((error) => console.error("获取星球数据失败:", error));
  }, []); // 空依赖数组避免无限循环

  return (
    <div>
      <div className="flex">
        {/* 遍历星球数组，添加唯一key */}
        {planets.map((planet) => (
          <p key={planet.name}>{planet.name}</p>
        ))}
      </div>
    </div>
  );
};

export default AllPlanets;

如果需要加载更多星球（API默认仅返回10条数据），可以额外处理响应中的res.data.next字段，实现分页加载逻辑。

内容的提问来源于stack exchange，提问作者Mikey Navarro