reactjs - React 中重复的 axios 调用

Question

我正在开发一个 create-react-app 生成的应用程序，并且我有一个对本地 JSON 文件的 API 调用。 不知何故，这段代码会生成 8 个 API 调用。

import '@css/request.scoped.css';
import { useState } from 'react';
import { getAllData } from '@api/api';

function Request() {
  let [user, setUser] = useState('');

  function changeUser(data) {
    setUser(data);
  }

  getAllData().then((reply) => {
    changeUser(reply.data[0].item_name);
  });

  return <>{user}</>;
}

export default Request;

这是我的 Axios 实例

import axios from "axios";

const request = axios.create({
  baseURL:'./example.json',
  timeout: 20000,
});

export const getAllData = () => {
  return request({
    method: 'get',
    url: '',
  });
};

谁能告诉我为什么会发生这种情况？

Answer 1

我怀疑最可能的原因是组件正在重新渲染，目前的逻辑是在每次渲染时进行 API 调用。

您可以将逻辑设置为仅在组件的第一次渲染时发生 with useEffect :

import { useState, useEffect } from 'react';

// then...
useEffect(() => {
    getAllData().then((reply) => {
        changeUser(reply.data[0].item_name);
    });
}, []);

传递给 useEffect 的空依赖项数组意味着它会在组件首次加载时打开一次，而不是在后续渲染时打开。您添加到该数组的任何依赖项都会导致在渲染之间依赖项发生变化时再次调用该操作。