Question

我目前正在使用 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;

Answer 1

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

data

如果您想记录状态更新，请将其分离为具有特定依赖项的自身效果。

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

Answer 2

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

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

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

React axios API GET 请求返回太多对象

2 个答案: