基本上，我在 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 [];
}
} 
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> })};希望这对您有所帮助，如有任何疑问，请随时回答。