无法读取未定义的属性 'active' - React API 调用

Question

我想知道我做错了什么。

我试图显示我从这个 API 调用中收到的数据，但我遇到了错误。

当我使用 React DevTool 检查时，我的状态得到了数据。

显示 {total.ts} 有效，但当我尝试从该对象访问数据时 {total.data.active} 无效。

顺便说一句，我也想知道，我收到了一个对象：useState({}) 是正确的吗？

感谢您对未来的回答和对我的帮助，这可能并不难。

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

function Total() {
  const [total, setTotal] = useState({});

  useEffect(() => {
    Axios.get("https://covid2019-api.herokuapp.com/v2/total").then(
      (response) => {
        setTotal(response.data);
      }
    );
  }, []);

  return (
    <>
      <h1>Hello from Total</h1>
      <div className="global-container">
        <div className="title-container"></div>
        <div className="data-container">{total.data.active}</div>
        <div className="date-container">{total.ts}</div>
      </div>
    </>
  );
}

export default Total;

Answer 1

您的问题很可能是 total.data.active 会产生一个 js 错误，因为 total.data 在您收到 ajax 调用响应之前是未定义的。对此进行检查可能会解决问题。

这是一个如何完成的示例（我使用 fetch 而不是 Axios 但这不是重要的部分）：

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [total, setTotal] = useState({});

  useEffect(() => {
    fetch("https://covid2019-api.herokuapp.com/v2/total")
      .then((response) => response.json())
      .then((responseBody) => {
        setTotal(responseBody);
      });
  }, []);

  return (
    <>
      <h1>Hello from Total</h1>
      <div className="global-container">
        <div className="title-container"></div>
        <div className="data-container">
          {total && total.data ? total.data.active : ''}
        </div>
        <div className="date-container">{total.ts}</div>
      </div>
    </>
  );
}

Answer 2

您应该在加载数据时添加条件，因为您的 api 调用是异步的

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

function Total() {
  const [total, setTotal] = useState(null);

  useEffect(() => {
    Axios.get("https://covid2019-api.herokuapp.com/v2/total").then(
      (response) => {
        setTotal(response.data);
      }
    );
  }, []);

  return (
    <>
      <h1>Hello from Total</h1>
      {
        total ? (
         <div className="global-container">
           <div className="title-container"></div>
           <div className="data-container">{total.data.active}</div>
           <div className="date-container">{total.ts}</div>
         </div>
        ) : (
          <div>Loading...</div>
        )
      }
    </>
  );
}

export default Total;

`

无法读取未定义的属性 'active' - React API 调用

Cannot read property 'active' of undefined - React API Call

javascript

api

call

reactjs

无法读取未定义的 属性 'active' - React API 调用

Cannot read property 'active' of undefined - React API Call

javascript

api

call

reactjs

无法读取未定义的属性 'active' - React API 调用