React获取嵌套API数据页面空白，如何修改代码展示数据？

问题根源 #

原代码存在几个关键问题导致无法正常渲染数据：

1. API返回的是数组格式的疾病列表，但代码里直接把diseaseData当作单个对象处理，访问diseaseData.translations会报错（数组没有该属性）。
2. getTranslation函数逻辑错误，它尝试从数组diseaseData中获取translations，而不是从单个疾病对象中获取。
3. 渲染时错误地将translation（对象）当作函数调用：translation("en-uk")，这会直接抛出错误导致页面空白。
4. 缺少对疾病数组的遍历，没有处理多个疾病数据的情况。

修正后的完整代码 #

const Home = () => {
  const [diseaseData, setDiseaseData] = useState([]); // 初始值设为空数组，匹配API返回格式

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch("http://127.0.0.1:8000/api/disease/");
      const data = await response.json();
      setDiseaseData(data);
      console.log(data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  // 从单个疾病对象中获取指定语言的翻译
  const getTranslation = (disease, langCode) => {
    if (disease && disease.translations) {
      return disease.translations[langCode] || null;
    }
    return null;
  };

  return (
    <div className="disease-container">
      {/* 先遍历疾病数组中的每个疾病项 */}
      {diseaseData.map((disease) => (
        <div key={disease.pk_id} className="disease-card">
          <h1>{disease.name.trim()}</h1>
          <p>物种: {disease.species}</p>
          
          {/* 遍历当前疾病的所有翻译语言 */}
          {Object.keys(disease.translations || {}).map((langCode) => {
            const translation = getTranslation(disease, langCode);
            if (!translation) return null;

            return (
              <div key={langCode} className="translation-section">
                <h2>语言版本: {langCode}</h2>
                <h3>{translation.name}</h3>
                <p><strong>分类:</strong> {translation.subcategory}</p>
                <p><strong>分类描述:</strong> {translation.subcategory_desc}</p>
                <p><strong>本地名称:</strong> {translation.local_names}</p>
                <p><strong>传播方式:</strong> {translation.transmission}</p>
                <p><strong>感染率:</strong> {translation.number_affected}</p>
                <p><strong>死亡率:</strong> {translation.death_rate}</p>
                <p><strong>关键症状:</strong> {translation.key_signs}</p>
                <p><strong>预防措施:</strong> {translation.prevention}</p>
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
};

export default Home;

关键修改点 #

• 初始状态修正：将useState(null)改为useState([])，匹配API返回的数组格式。
• 遍历逻辑修正：先遍历diseaseData数组中的每个疾病对象，再遍历每个对象的翻译语言。
• getTranslation函数优化：接收单个疾病对象作为参数，正确从该对象中获取指定语言的翻译数据。
• 渲染错误修复：移除错误的函数调用translation("en-uk")，直接访问对象属性。
• 添加唯一key：使用疾病的pk_id作为外层遍历的key，避免React警告。

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