在Next.js中如何使用useState获取嵌套对象中的数据

你的代码存在几个关键问题，导致无法正确渲染嵌套数据：

• 初始状态不合理：useState([null]) 初始值是包含null的数组，第一次渲染时map会处理这个null，直接导致属性访问报错，页面显示空行
• 遍历对象属性错误：map回调里误用countryfact.name和countryfact.id，但countryfact是整个数组，应该访问当前遍历项country的属性
• 数据字段不匹配：API返回的数据里没有name和age字段，对应国家名称是nome.abreviado，唯一标识可以用id['ISO-3166-1-ALPHA-2']
• Key值无效：key={country.name}里的country.name不存在，必须用API返回的唯一标识作为key

修复后的完整代码 #

import { useEffect, useState } from "react";

const url = "https://servicodados.ibge.gov.br/api/v1/paises";

export default function Home() {
  // 初始状态设为空数组，避免第一次渲染处理null
  const [countryfact, setCountryfact] = useState([]);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((result) => setCountryfact(result))
      .catch(err => console.error('获取数据失败:', err)); // 增加错误捕获，方便排查问题
  }, []);

  return (
    <div style={{ color: "blue" }}>
      <ul>
        {/* 增加加载状态提示，避免空数组时显示空列表 */}
        {countryfact.length > 0 ? (
          countryfact.map((country) => (
            <li key={country.id['ISO-3166-1-ALPHA-2']}>
              <span>国家名称: {country.nome.abreviado}</span>
              <span style={{ marginLeft: '10px' }}>ISO代码: {country.id['ISO-3166-1-ALPHA-2']}</span>
              <span style={{ marginLeft: '10px' }}>首都: {country.governo.capital.nome}</span>
              <span style={{ marginLeft: '10px' }}>所属区域: {country.localizacao.regiao.nome}</span>
            </li>
          ))
        ) : (
          <li>加载中...</li>
        )}
      </ul>
    </div>
  );
}

关键修改说明 #

1. 初始状态调整：将useState([null])改为useState([])，确保第一次渲染时map处理的是空数组而非null
2. 嵌套属性访问：通过country.nome.abreviado这种链式调用，正确访问API返回的嵌套对象属性
3. 唯一Key设置：使用country.id['ISO-3166-1-ALPHA-2']作为key，保证每个列表项的唯一性
4. 用户体验优化：增加加载状态提示，避免数据未返回时页面显示空列表
5. 错误处理：加入catch捕获请求异常，便于排查网络或API故障

如果API返回的部分嵌套属性可能为null（比如regiao-intermediaria），可以使用可选链操作符?.避免报错，例如country.localizacao['regiao-intermediaria']?.nome

内容的提问来源于stack exchange，提问作者jonas zeferino