0

reactを用いて、ダミーのユーザ情報をjsonで返すAPIからデータをロードするコードを書いております。以下のようなものです。

import React, { useState, useEffect } from "react";

function App() {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    fetch(`https://randomuser.me/api/?results=5&nat=us&inc=gender,name,email`)
      .then((res) => res.json())
      .then((json) => setUsers(json));
  }, []);

  return (
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Email</th>
      </tr>
      {users.results.map((result) => {
        return (
          <tr>
            <td>{result.name.first}</td>
            <td>{result.gender}</td>
            <td>{result.email}</td>
          </tr>
        );
      })}
    </table>
  );
}

export default App;

このコードを実行するとTypeError: Cannot read property 'results' of nullというエラーが表示されてしまいます。しかし一方でreturn(<table>...</table>)内が

  return users ? (
    <h1>
      {users.results.map((result) => {
        return result.name.first;
      })}
    </h1>
  ) : (
    <p>Loading...</p>
  );

のコードの後、最初のコードを実行するとテーブルが表示されます。再度ロードすると、TypeError: Cannot read property 'results' of nullが表示されます。
2番目のコードは再ロード後も正常に実行されます。users.results.map()は同じにもかかわらず、なぜこのような違いが生じるのでしょうか。またどうすればエラーが生じなくなるでしょうか。
よろしくお願いいたします。

2
  • useState()の引数に指定するのはstateの初期値です。またuseEffect()が動くのはレンダー後なので、まず最初に初期値でレンダリングが行われます。Reactクラスを使った場合も副作用はcomponentDidMount(DOMのレンダー後)に処理を書いていたと思いますが。
    – harry0000
    2021年5月1日 4:15
  • ご指摘の通りです。useEffect()のレンダーのタイミングについての理解があいまいでした。ありがとうございます。
    – peridotite
    2021年5月2日 2:22

1 件の回答 1

0

なぜこのような違いが生じるのでしょうか。

後半のコードでは usersnull でないかどうか(正確には truthy であるかどうか)をチェックしていますが、前半のコードではチェックしていません。

これに加えて、初期値null としている

  const [users, setUsers] = useState(null);

ため、常にエラーが発生します。

どうすればエラーが生じなくなるでしょうか。

1つめの方法は、後半のコードと同様、 usersnull チェックを行うことです。

      {users ? (
        users.results.map((result) => {
          return (
            <tr>
              <td>{result.name.first}</td>
              <td>{result.gender}</td>
              <td>{result.email}</td>
            </tr>
          );
        })
      ) : (
        <tr>
          <td>Loading...</td>
          <td>Loading...</td>
          <td>Loading...</td>
        </tr>
      )}

2つめの方法は、初期値を適切に設定しnullとなるような状況を無くすことです。

  const [users, setUsers] = useState({ results: [] });
1
  • ありがとうございます。なぜエラーが発生していたのか理解できました。
    – peridotite
    2021年5月2日 2:24

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。