如何在 React.Js 挂钩中使用 SQL 查询值正确填充下拉列表

Question

我有一个名为 Sidebar.jsx 的 React 组件。在其中，我进行了一个 API 调用以获取一组舰队以填充我的边栏中最终的 JSX 下拉元素。这会产生一个简单的 JSON 数组。

我从我的服务文件夹中导入了一个名为 getFleets() 的函数来进行 API 调用。该服务使用 fetch API 对我的后端进行查询调用，如下所示：

export async function getFleets() {
    const resp = await fetch("http://localhost:5000/fleets", {
        method: 'GET',
        headers: {},
        mode: 'cors'
    });
    return resp.json();
};

但是，当我使用该网站时，它似乎无限地进行 API 调用。这是我第一次尝试在反应组件中进行 API 调用，所以我在这里有点困惑。我在网上阅读的其他指南似乎相似，但我显然遗漏了一些东西。

我该怎么做才能使这个 API 只调用一次并检索我的 JSON 数组，这样我以后可以用它来填充我的 return 中的选项？

Sidebar.jsx

import React, { useEffect, useState } from "react";
import { getFleets } from "../services/FleetService";

const Sidebar = () => {
  const [data, setData] = useState([]);

  useEffect(() => {

    const setFleets = async () => {
        const fleets = await getFleets();
        console.log(fleets);
        setData(fleets);
      }
    setFleets();
  }, [data]);


  return (
    <>
    // Add data to <select> </select>
  );
};

Answer 1

你的代码的工作方式，因为 data 是发送到 useEffect 的依赖数组的一部分，每次 data 改变效果运行s，它改变data，这运行再次产生效果...导致无限循环。

简单的修复方法是从依赖数组中删除 data，并明确指定一个空数组 [] 作为 useEffect 的第二个参数。这将使效果运行只有一次，当组件首次呈现时。

您需要明确指定一个空数组，因为当根本不指定第二个参数时，效果将运行在每次渲染时出现，从而导致无限循环问题。

如何在 React.Js 挂钩中使用 SQL 查询值正确填充下拉列表

How to properly Populate a Dropdown with SQL Query Values in React.Js Hook

javascript

reactjs

async-await

fetch-api