无法读取未定义的“活动”属性 - 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 错误，因为在您获得 ajax 调用响应之前 total.data 是未定义的。对此进行检查可能会解决问题。这是一个如何完成的示例（我使用 fetch 而不是 Axios 但这不是重要的部分）：import React, { useEffect, useState } from "react";import "./styles.css";export default function App() {&nbsp; const [total, setTotal] = useState({});&nbsp; useEffect(() => {&nbsp; &nbsp; fetch("https://covid2019-api.herokuapp.com/v2/total")&nbsp; &nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; &nbsp; .then((responseBody) => {&nbsp; &nbsp; &nbsp; &nbsp; setTotal(responseBody);&nbsp; &nbsp; &nbsp; });&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <h1>Hello from Total</h1>&nbsp; &nbsp; &nbsp; <div className="global-container">&nbsp; &nbsp; &nbsp; &nbsp; <div className="title-container"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div className="data-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {total && total.data ? total.data.active : ''}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div className="date-container">{total.ts}</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </>&nbsp; );}

Answer 2

您应该在加载数据时添加条件，因为您的 api 调用是异步的import React, { useEffect, useState } from "react";import Axios from "axios";function Total() {&nbsp; const [total, setTotal] = useState(null);&nbsp; useEffect(() => {&nbsp; &nbsp; Axios.get("https://covid2019-api.herokuapp.com/v2/total").then(&nbsp; &nbsp; &nbsp; (response) => {&nbsp; &nbsp; &nbsp; &nbsp; setTotal(response.data);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <h1>Hello from Total</h1>&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; total ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="global-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="title-container"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="data-container">{total.data.active}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="date-container">{total.ts}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Loading...</div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </>&nbsp; );}export default Total;