在 React 容器内的 useEffect() 中使用通过 API 请求加载的变量

Question

基本上，我在 useEffect() 中有一个 API 请求，因此它会在页面加载之前加载所有“笔记本”，以便我可以显示它们。

useEffect(() => {
   getIdToken().then((idToken) => {
        const data = getAllNotebooks(idToken);
        const jsonData = JSON.stringify(data, null, 2);
        notebooks = JSON.parse(jsonData) as [Notebook, Withdraw[]][];
   });
}

如何在我的代码中使用此笔记本列表，以便我可以在标签中使用它？

我是 React 的初学者，所以除了调用 useEffect() 中的函数之外，我没有做太多事情。

更新： 根据要求，这里是 getAllNotebooks 核心函数、其用例以及 useEffect() 内部调用的函数：

withdraw_repository_http

async getAllNotebooks(idToken: string): Promise<[Notebook, Withdraw[]][]> {
    var notebooks: [Notebook, Withdraw[]][] = [[new Notebook({numSerie : '34000', isActive: false}), [new Withdraw({numSerie : '34000', email: 'erro@maua.br', withdrawTime: Date.now(), finishTime: null})]]];
    try {
      const url = process.env.NEXT_PUBLIC_API_URL + '/get-all-notebooks';
      const { data, status} = await axios.get<[Notebook, Withdraw[]][]>(url, {headers : {'Authorization' : `Bearer ${idToken}'`}});
      console.log('response status is', status);
      if (status === 200) {
          // console.log('response data is', data);
          const jsondata = JSON.stringify(data, null, 2);
          notebooks = JSON.parse(jsondata).notebooks as [Notebook, Withdraw[]][];
          console.log('notebooks is', notebooks);
          return notebooks;
      }
      else {
          console.log('response data is', data);
      }
    }
    catch (error) {
      if (axios.isAxiosError(error)) {
          console.log('error response is', error);
  } else {
          console.log('unknown error');
          console.log(error);
          
      }
    }
    return notebooks;
  }

get_all_notebooks_usecase

import { IWithdrawRepository } from '../domain/repositories/withdraw_repository_interface';

export class GetAllNotebooksUsecase {
  constructor(private withdrawRepo: IWithdrawRepository) {}

  async execute(idToken: string) {
    const withdraws = await this.withdrawRepo.getAllNotebooks(idToken);
    return withdraws;
  }
}

withdraw_provider

async function getAllNotebooks(idToken: string){
    try {
      const notebooks = await getAllNotebooksUsecase.execute(idToken);
      setNotebooks(notebooks);
      return notebooks;
    }
    catch (error: any) {
      console.log(`ERROR PROVIDER: ${error}`);
      const setError = error;
      setError(setError);
      return [];
    }
  }

Answer 1

const [notebooks, setNotebooks] = useState([]); // initialize notebooks with empty array

useEffect(() => {
   getIdToken().then((idToken) => {
      const data = getAllNotebooks(idToken);
       // I think you don't need this line
       // const jsonData = JSON.stringify(data, null, 2);

      setNotebooks(data);
   });
},[]); // empty brackets here means: useEffect executes only once on load component

// render notebooks using JSX (xml inside javascript)
return {notebooks.map((notebook, index) => {
    <div>
       <h1>My notebook number {index}</h1>
       <h3>This noteboot's name is: {notebook.name}</h3>
       etc..
    </div>
})};

希望这对您有所帮助，如有任何疑问，请随时回答。