从 API 获取数据的最佳方式

Question

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

这个用户列表来自api。

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

context.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>
  );
}

users.js

-> 仅包括已获取用户数据的上下文，并将react-select 包含在下拉列表中。

-> 使用useContext 获取承诺值并在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() 方法，但如果我删除它，它不会被执行..

请帮助我并提前感谢..

Answer 1

您可以将用户列表存储在一个数组中，并让您的组件在挂载时调用getUsers。然后在需要的地方使用users

export function Provider({ children }) {
  const [users, setUsers] = useState([]);
  const getUsers = () => {
    if (!users.length) {
      axios.get(`https://randomuser.me/api/?results=10`).then((res) => {
        setUsers(res.data.results);
      });
    }
  };

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

在 User.js 上

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

  useEffect(() => {
    getUsers();
  }, [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>
  );
};