时间戳

首页 > 解决方案 > 无法读取未定义的属性“活动”-React API 调用

javascript - 无法读取未定义的属性“活动”-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;

标签： javascriptreactjsapicall

解决方案

您的问题可能是 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>
    </>
  );
}

推荐阅读