Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* APIリクエストの重複を防ぐ [#ze671910]
import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';
export default function Page() {
const [person, setPerson] = useState('Alice');
const [bio, setBio] = useState(null);
useEffect(() => {
let ignore = false;
setBio(null);
fetchBio(person).then(result => {
if (!ignore) {
setBio(result);
}
});
return () => {
ignore = true;
};
}, [person]);
- React公式より https://react.dev/reference/react/useEffe...
- 上のコードでuseEffect()のfetchBio()のAPIリクエストが終...
- 1回目のfetchBio()のsetBio()は実行されず、
- 2回目のfetchBio()のsetBio()が実行される
** 参考 [#b415e8ae]
https://react.dev/reference/react/useEffect#fetching-data...
終了行:
* APIリクエストの重複を防ぐ [#ze671910]
import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';
export default function Page() {
const [person, setPerson] = useState('Alice');
const [bio, setBio] = useState(null);
useEffect(() => {
let ignore = false;
setBio(null);
fetchBio(person).then(result => {
if (!ignore) {
setBio(result);
}
});
return () => {
ignore = true;
};
}, [person]);
- React公式より https://react.dev/reference/react/useEffe...
- 上のコードでuseEffect()のfetchBio()のAPIリクエストが終...
- 1回目のfetchBio()のsetBio()は実行されず、
- 2回目のfetchBio()のsetBio()が実行される
** 参考 [#b415e8ae]
https://react.dev/reference/react/useEffect#fetching-data...
ページ名:
