Grundsätzlich habe ich eine API-Anfrage in useEffect(), damit alle „Notizbücher“ geladen werden, bevor die Seite geladen wird, damit ich sie anzeigen kann.
useEffect(() => {
getIdToken().then((idToken) => {
const data = getAllNotebooks(idToken);
const jsonData = JSON.stringify(data, null, 2);
notebooks = JSON.parse(jsonData) as [Notebook, Withdraw[]][];
});
}
Wie verwende ich diese Notizbuchliste in meinem Code, damit ich sie in Tags verwenden kann?
Ich bin ein React-Anfänger, daher habe ich nicht viel anderes gemacht, als Funktionen in useEffect() aufzurufen.
Update: Wie gewünscht, hier die Kernfunktion getAllNotebooks, ihr Anwendungsfall und die intern von useEffect() aufgerufene Funktion:
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> })};希望这对您有所帮助，如有任何疑问，请随时回答。