TypeError: Cannot read property 'fixtures' of undefined, Nested Json From Fetch Call

Question

对于异步调用、JS 或 React 来说不是最好的，并且正在努力......这里是......

所以我正在使用 fetch 库从看起来像这样的数据中呈现 table（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 框架，所以这是 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
    });
  });
}

这是我在功能组件中渲染固定装置的代码 Table：

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 变量是否有数据，然后检查键是否属于数据，最后检查 fixtures 是否包含要映射的数组 -

{fixtures && fixtures.api && fixtures.api.fixtures.length ?
              fixtures.api.fixtures.map(fixture => (
          )):null}

Answer 2

您可以使用 JavaScript 中称为可选链接的新功能来解决此问题。 Read here 有关可选链接的更多信息。

{fixtures?.api?.fixtures?.length ?
  fixtures.api.fixtures.map(fixture => (
     <div className="fixture">
      {fixture}
     </div>
)):null}

本质上，这个可选链接 ?. 是一种访问嵌套对象属性的防错方法，即使中间属性不存在。

TypeError: Cannot read property 'fixtures' of undefined, Nested Json From Fetch Call

TypeError: Cannot read property 'fixtures' of undefined, Nested Json From Fetch Call

javascript

json

reactjs

react-bootstrap

fetch-api