IT技术 - 从 API 获取数据的最佳方式 - 吾爱随笔录

我正在制作一个简单的react应用程序，我需要在选择下拉列表中显示用户列表。

此用户列表来自 api。

所以我在我的应用程序中使用了上下文 API，我已经创建了一个上下文并在上下文中进行了 api 调用。

上下文.js

import React from "react";
import axios from "axios";

export const UserContext = React.createContext();

export function Provider({ children }) {
  const getUsers = () => {
    return axios.get(`https://randomuser.me/api/?results=10`).then((res) => {
      return res;
    });
  };

  return (
    <UserContext.Provider value={{ usersList: getUsers() }}>
      {children}
    </UserContext.Provider>
  );
}

用户.js

-> 仅包含已获取用户数据的上下文并包含用于下拉列表的react-select。

-> 使用useContext获取Promise值和内部useEffect钩子获取响应并将其存储在状态变量中setUsers

-> 在渲染方法中返回选择框值，获取的用户列表作为下拉列表。

import React, { useContext, useEffect, useState } from "react";
import Select from "react-select";
import { UserContext } from "../context";

const Users = () => {
  const { usersList } = useContext(UserContext);

  const [users, setUsers] = useState([]);

  const getUsers = () => {
    usersList.then((users) => {
      setUsers(users.data.results);
    });
  };

  useEffect(() => {
    getUsers();
  }, []);

  return (
    <div>
      <p> Below user list in select box is called from API </p>
      <Select
        value={""}
        name="user"
        options={users}
        getOptionLabel={(option) => option.name.first}
        getOptionValue={(option) => option.id.value}
        className="basic-multi-select"
      />
    </div>
  );
};

export default Users;

工作示例：

询问：

-> 这工作正常，但在我的实际应用程序中，这会导致multiple api calls.

-> 我已经检查了网络选项卡，它被调用了至少 50 次，我觉得这将是性能方面的一个大问题。

所以我想知道是否有更好和标准的方法来实现这一点，以避免内存泄漏和多次调用 api 获取？

我怀疑这条线是否，

<UserContext.Provider value={{ usersList: getUsers() }}>

导致真正的问题，因为我正在调用 getUsers()带有 parathesis 的方法，()但是如果我删除它，它就不会被执行..

请帮助我并提前致谢..