React项目加载足球API遇TypeError，需处理未定义score字段

嘿，作为Web开发新手遇到这种属性未定义的错误太正常了，我来帮你搞定它！

问题根源 #

你调用的赛事数据里，部分赛事对象没有score字段，当你直接写data[index].score.ft[0]时，score是undefined，自然没法读取它的ft属性，就会抛出Cannot read property 'ft' of undefined的错误。

解决方案：安全属性访问 + 代码优化 #

我们可以用**可选链操作符（?.）**来安全访问嵌套属性，再配合条件判断在属性不存在时显示默认文本。另外，你当前重复写了10条赛事的渲染代码，用map循环能让代码更简洁易维护。

下面是修改后的完整代码：

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

export default function Eredmeny() {
  const [data, setData] = useState([]);
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const load = async () => {
      try {
        const { data: { matches } } = await axios(
          "https://raw.githubusercontent.com/openfootball/football.json/master/2020-21/en.1.json"
        );
        setData(matches);
      } catch (err) {
        console.error('加载数据失败:', err);
      }
    }
    load()
  }, [])

  const prev = () => {
    if (index >= 10){
      setIndex(index - 10);
    }
  }

  const next = () => {
    if (index <= data.length - 11){
      setIndex(index + 10);
    }
  }

  if (data.length <= 0) {
    return "Loading..."
  }

  // 截取当前要显示的10条赛事数据
  const currentMatches = data.slice(index, index + 10);

  return(
    <div>
      <h1>
        <button onClick={prev}>Previous</button>
        {data[index].round}
        <button onClick={next}>Next</button>
      </h1>
      <h3>
        {currentMatches.map((match, idx) => (
          <div key={idx}>
            <p>{match.team1} - {match.team2}</p>
            {/* 安全访问score.ft，不存在则显示"暂无信息" */}
            {match.score?.ft 
              ? `${match.score.ft[0]} - ${match.score.ft[1]}` 
              : '暂无信息'}
          </div>
        ))}
      </h3>
    </div>
  );
}

关键改动说明： #

1. 安全访问属性：用match.score?.ft检查score和ft是否存在，?.会在属性为undefined或null时停止访问，避免报错。如果存在就显示比分，否则显示“暂无信息”。
2. 用map循环渲染：通过data.slice(index, index + 10)截取当前页的10条数据，再用map循环渲染，彻底消除重复代码，以后要修改显示逻辑只需要改一处即可。
3. 添加key属性：React列表渲染需要唯一的key，这里用循环的idx作为临时key（如果赛事数据有唯一id的话，用id会更稳妥）。
4. 添加错误捕获：在axios请求里加了try/catch，方便调试数据加载失败的情况。

这样修改后，既解决了TypeError的问题，又让代码更整洁易维护，很适合新手理解和扩展~

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