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

问题描述

我想知道我在做错什么。

我试图显示从此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;

解决方法

您的问题可能是total.data.active会生成js错误，因为在您获得ajax调用响应之前，total.data是未定义的。对此进行检查可能会解决该问题。

这里是如何完成此操作的示例（我使用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>
    </>
  );
}

,

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

import React,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;

`