所以response初始值为null。
你正在调用一些异步的函数，这些函数正在执行一些抓取操作。在某个时间点，这些函数将完成数据的抓取，并将response更新为该API的任何返回值。但是JS不想等待任何不需要的东西，除非你特别告诉它。所以当你深入到function App()时，即使该代码在其上面的所有逻辑之后出现，它也会在响应返回并更新'global'变量response之前立即执行。
本质上，由于JS的异步特性，在response被设置为API的响应之前，您正在调用response.data.body。这会出错，因为response为null。
你正在实现的模式是错误和奇怪的。响应可以存储在状态中，API调用可以在useEffect中执行，例如：

const [allTutors, setAllTutors] = useState(null);

useEffect(() => {
   const fetchData = async () => {
       const response = await getAllTutors();
       setAllTutors(response.data.body);
   }
   fetchData();
}, []);

或者类似于该结构的东西，可能会根据API返回的内容更改一些内容。

最简单的方法是存储一个promise，然后你可以在任何地方重用这个promise。
React中这种方法的问题在于它不是 * React式的 *;数据更改时不会触发任何重新渲染。
我建议使用上下文来 Package 任何需要数据的组件（或 Package 整个应用程序）。
举个例子

import { createContext, useContext, useEffect, useState } from "react";

const TutorsContext = createContext({ tutors: [] }); // default value

const getAllTutors = async () => (await axios.get("API...")).data.body;

// context provider
const TutorsProvider = ({ children }) => {
  const [tutors, setTutors] = useState([]);

  useEffect(() => {
    getAllTutors().then(setTutors).catch(console.error);
  }, []);

  return (
    <TutorsContext.Provider value={{ tutors }}>
      {children}
    </TutorsContext.Provider>
  );
};

// a handy hook
const useTutors = () => useContext(TutorsContext);

export { TutorsProvider, useTutors };

然后可以在提供程序中 Package 任何组件，例如

<TutorsProvider>
  <App />
</TutorsProvider>

在这些组成部分中

const { tutors } = useTutors();

这将确保在初始化上下文时只检索一次数据。然后可以与任何您想要的组件共享数据。