TypeError：无法从访存调用中读取未定义的嵌套Json的属性“夹具”

Question

不是异步调用，JS或React并在其中挣扎的最佳选择。。。

所以我正在使用fetch库从看起来像这样的数据渲染表（fixtures数组中还有更多的灯具：

{
    "api": {
        "results": 380,
        "fixtures": [{
            "fixture_id": 157015,
            "league_id": 524,
            "league": {
                "name": "Premier League",
                "country": "England",
                "logo": "https://media.api-sports.io/football/leagues/39.png",
                "flag": "https://media.api-sports.io/flags/gb.svg"
            },
            "event_date": "2019-08-09T19:00:00+00:00",
            "event_timestamp": 1565377200,
            "firstHalfStart": 1565377200,
            "secondHalfStart": 1565380800,
            "round": "Regular Season - 1",
            "status": "Match Finished",
            "statusShort": "FT",
            "elapsed": 90,
            "venue": "Anfield",
            "referee": "Michael Oliver, England",
            "homeTeam": {
                "team_id": 40,
                "team_name": "Liverpool",
                "logo": "https://media.api-sports.io/football/teams/40.png"
            },
            "awayTeam": {
                "team_id": 71,
                "team_name": "Norwich",
                "logo": "https://media.api-sports.io/football/teams/71.png"
            },
            "goalsHomeTeam": 4,
            "goalsAwayTeam": 1,
            "score": {
                "halftime": "4-0",
                "fulltime": "4-1",
                "extratime": null,
                "penalty": null
            }
        }]
    }
}

这是我处理异步功能的方式：

export async function handleResponse(response) {
  if (response.ok) {
    let someResponse = response.json();
    console.log("loading response");
    console.log(someResponse);
    return someResponse;
  }

  if (response.status === 400) {
    throw new Error(error);
  }

  const error = await response.text();
  console.log("error was: " + error);
  console.log("status was: " + response.status);
  throw new Error("Network response was not ok.");
}

export function handleError(error) {
  console.error("API call failed. " + error);
  throw error;
}

我正在使用Flux框架，所以这是磁通量动作：

import dispatcher from "../appDispatcher";
import * as footballResultsApi from "../api/footballResultsApi";
import actionTypes from "./actionTypes";

export function loadFixtures() {
  return footballResultsApi.getFixtures().then(fixtures => {
    dispatcher.dispatch({
      actionType: actionTypes.LOAD_FIXTURES,
      fixtures: fixtures
    });
  });
}

这是我在功能组件中的代码，用于呈现灯具表：

const [fixtures, setFixtures] = useState(fixturesStore.getFixtures());

  useEffect(() => {
    fixturesStore.addChangeListener(onChange);

    if (fixturesStore.getFixtures().length === 0) loadFixtures();

    return () => {
      fixturesStore.removeChangeListener(onChange);
    };
  }, []);

  function onChange() {
    console.log("fixtures changed");
    setFixtures(fixturesStore.getFixtures());
  }


return (
    <GridWrapper>
      <div>
        <Table striped bordered hover size="sm" responsive>
          <thead>
            <tr className="same-col-widths">
              <th>Date/Time</th>
              <th>Home Team</th>
              <th>Away Team</th>
              <th>Home Goals</th>
              <th>Away Goals</th>
            </tr>
          </thead>
          <tbody>
            {fixtures.api.fixtures.map(fixture => (
              <tr key={fixture.fixture_id}>
                <td>{fixture.event_date}</td>
                <td>{fixture.homeTeam.team_name}</td>
                <td>{fixture.awayTeam.team_name}</td>
                <td>
                  <Form>
                    <Form.Group controlId="homeGoals">
                      <StyledInput
                        size="sm"
                        required
                        type="text"
                        defaultValue={fixture.goalsHomeTeam}
                        className="smaller-input"
                      />
                    </Form.Group>
                  </Form>
                </td>
                <td>
                  <Form>
                    <Form.Group controlId="awayGoals">
                      <StyledInput
                        size="sm"
                        required
                        type="text"
                        placeholder="-"
                        defaultValue={fixture.goalsAwayTeam}
                        className="smaller-input"
                      />
                    </Form.Group>
                  </Form>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </GridWrapper>
  );

我收到此错误：

TypeError: Cannot read property 'fixtures' of undefined

如何在Json响应中访问fixtures数组中的数据？

Answer 1

[检查fixtures变量是否包含数据，然后检查键是否属于数据，最后检查fixture是否确实包含要映射的数组-