TypeError: Cannot read property 'ft' of undefined API

Question

所以我在 VS Code 中为大学 class 做一些 html javascript 业务。我们使用 React 和其他一些东西。我的问题是 API：https://raw.githubusercontent.com/openfootball/football.json/master/2020-21/en.1.json 所以我正在尝试从中加载数据。

我的问题是我正在尝试访问已定义分数的匹配项的分数，它在索引 + 3 处有效，但 {data[index].score.ft[0]} - {data[index].score.ft[1]} 部分不起作用，因为该特定匹配项未定义分数.我想以某种方式解决这个问题，即我的代码不会尝试从那些未定义的信息中加载信息，而是编写类似“无信息”之类的内容。

完整代码（我知道它很丑，我是网络开发的菜鸟）：

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 () => {
        const {data: { matches } } = await axios( 
            "https://raw.githubusercontent.com/openfootball/football.json/master/2020-21/en.1.json" );
        setData(matches);
        //console.log(data);
    }
    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..."
}

return(
    <div>
        <h1>
            <button onClick = {prev}>Previous</button>
            {data[index].round}
            <button onClick = {next} >Next</button>
        </h1>

        <h3>
            <p>{data[index].team1} - {data[index].team2}</p>
            {data[index].score.ft[0]} - {data[index].score.ft[1]}
            <p> {data[index+1].team1} - {data[index+1].team2}</p>
            <p> {data[index+2].team1} - {data[index+2].team2}</p>
            <p> {data[index+3].team1} - {data[index+3].team2}</p>
            {data[index+3].score.ft[0]} - {data[index+3].score.ft[1]}
            <p> {data[index+4].team1} - {data[index+4].team2}</p>
            <p> {data[index+5].team1} - {data[index+5].team2}</p>
            <p> {data[index+6].team1} - {data[index+6].team2}</p>
            <p> {data[index+7].team1} - {data[index+7].team2}</p>
            <p> {data[index+8].team1} - {data[index+8].team2}</p>
            <p> {data[index+9].team1} - {data[index+9].team2}</p>

        </h3>

        


    </div>
    
);

}

Answer 1

由于您的某些记录没有分数对象，请在访问以下值之前进行空检查。

{data[index].score ? (data[index].score.ft[0] - data[index].score.ft[1]): ''}

TypeError: Cannot read property 'ft' of undefined API

TypeError: Cannot read property 'ft' of undefined API

html

javascript

undefined

github-api

reactjs