【学習備忘録】Reactアプリ開発のメモ【ポケモン】

• 教材
  • 「【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 」
• Udemy

sec3：10データの取得

App.js

useEffect(() => {
    const fetchPokemonData = async () => {
      // 全てのポケモンデータを取得
      let res = await getAllPokemon();
      console.log(res);
    };
    fetchPokemonData();
  }, []);

• asyncデータをとってくるまで待つ
• getAllPokemon関数はpokemon.jsで記載

utils/pokemon.js

export const getAllPokemon = (url) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((res) => res.json()
      .then((data) => resolve(data)));
  });
};

• fetchでデータにアクセス
• 引数urlでAppのinitialURLを受け取っている

ハマった：useEffectのなかにuseState

❌

useEffect(() => {
  const [loading, setLoading] = useState(true);
}

⭕

const [loading, setLoading] = useState(true);
  
  useEffect(() => { .. }