JavaScript/React/useEffect/useEffectでレースコンディションを防ぐのバックアップソース(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
バックアップを表示
JavaScript/React/useEffect/useEffectでレースコンディションを防ぐへ行く。
- 1 (2022-02-07 (月) 15:57:10)

#author("2022-02-07T15:57:10+09:00","default:ryuichi","ryuichi")
* useEffectでレースコンディションを防ぐ [#a103ca00]

#sh(javascript){{
 import { useEffect, useState } from "react";
 
 function App() {
   const [id, setId] = useState(0);
   const [name, setName] = useState("");
 
   useEffect(() => {
     void (async () => {
       const response = await fetch(`https://swapi.dev/api/people/${id}/`);
       const data = await response.json();
       setName(data.name);
     })();
   }, [id]);
 
   return (
     <div className="App">
       <button
         onClick={() => {
           const id = Math.round(Math.random() * 30);
           setId(id);
         }}
       >
         Fetch data
       </button>
       <p>ID: {id}</p>
       <p>Name: {name}</p>
     </div>
   );
 }
 
 export default App;
}}