反应 axios API GET 请求返回太多对象答案

【问题标题】：React axios API GET request returning too many objects反应 axios API GET 请求返回太多对象
【发布时间】：2021-09-11 22:54:15
【问题描述】：

我目前正在使用 React 和 TypeScript 构建一个 Web 应用程序。我正在尝试获取自定义构建的 API。但是，它返回的太多了。在将它们存储为状态后，如何访问整个 API 以对它们进行过滤？

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

interface Invoice {
  id: number;
  customer_id: number;
  customer_name: string;
  date: string;
  total_invoice: number;
  total_margin: number;
  region: string;
  invoice_lines: [
    {
      product_id: number;
      product_name: string;
      unit_price: number;
      quantity: number;
      total_line: number;
      total_margin: number;
    }
  ];
}

function App() {
  const [data, setData] = useState<Invoice[]>([]);

  useEffect(() => {
    axios.get<Invoice[]>("http://localhost:3001/api/invoices").then(res => setData(res.data));
    console.log(data);
  }, []);

  return (
    <React.Fragment>
      <header>
        <h1>Hello</h1>
      </header>
      <main>
        {data.map(d => (
          <p key={d.id}>{d.customer_name}</p>
        ))}
      </main>
    </React.Fragment>
  );
}

export default App;

【问题讨论】：

对象太多，是不是有多个响应？
我已添加响应图片
原因和解决方法参考我下面的回答。

标签： reactjs typescript axios

【解决方案1】：

发生这种情况是因为您在 useEffect 钩子中设置状态，该钩子被配置为对每个状态更改做出反应。所以当你的组件被挂载时，你的 useEffect 会被触发，这反过来又会设置状态，导致你的 useEffect 再次触发，以此类推。如果您希望您的 useEffect 只执行一次，请将一个空数组作为第二个参数传递给您的 useEffect 挂钩，如下所示：

useEffect(()->{
//your function body here
},[])

这将导致您的 useEffect 仅在您的组件被挂载时执行，并且永远不会再次执行。有关 useEffect 挂钩如何工作的更多信息，请参阅 https://reactjs.org/docs/hooks-effect.html。

【讨论】：

【解决方案2】：

您的 useEffect 钩子缺少依赖数组，因此它会在每次渲染时触发。添加一个依赖数组。如果您希望 API 在组件挂载时获取一次，则使用空依赖数组，否则添加对 some 值的依赖，效果不是 data 为这也会导致渲染循环。

useEffect(() => {
  axios.get<Invoice[]>("http://localhost:3001/api/invoices")
    .then(res => setData(res.data));
}, []);

如果您想记录状态更新，则将其分离为具有特定依赖关系的自己的效果。

useEffect(() => {
  console.log(data);
}, [data]);

【讨论】：