コンソールでの " (2) [{…}, {…}] " と " {list: Array(2)} " の違い

Question

前提・実現したいこと

typescript + Reactでwebアプリ開発をしています。

  type sample = {
    key: number;
    value: string;
  };

  const hogehoge: sample[] = [
    { key: 1, value: "hoge" },
    { key: 2, value: "fuga"},
  ];
  console.log(hogehoge);

とすると、コンソールにて

(2) [{…}, {…}]
0: {key: 1, value: "hoge"}
1: {key: 2, value: "fuga"}
length: 2
__proto__: Array(0)

となります。

hogehoge.map(h => {
//なんらかの処理
})

のようにmap関数も使えます。

一方で、

  type sample = {
    key: number;
    value: string;
  };

  const initialState: Array<sample> = [
    {
      key: 0,
      value: "",
    },
  ];

  const [hogehoge, setHogehoge] = useState<sample[]>(initialState);

  useEffect(() => {
    getHogehoge().then((t) => {
      setHogehoge(t);
    });
  }, []);

console.log(hogehoge);


const getHogehoge = async () => {
  const res = await fetch("url");
  return await toJson(res);
};

const toJson = async (res: Response) => {
  const json = await res.json();
  if (res.ok) {
    return json;
  } else {
    throw new Error(json.message);
  }
};

とすると、コンソールにて

{list: Array(2)}
list: Array(2)
0: {key: 1, value: "hoge"}
1: {key: 2, value: "fuga"}
length: 2
__proto__: Array(0)
__proto__: Object

となります。

hogehoge.map(h => {
//なんらかの処理
})

のようにmap関数を使おうとすると、

Uncaught TypeError: hogehoge.map is not a function

のようなエラーが出たり、 hogehoge.lengthを出力するとundefinedになったりしてしまいます。

そこで、

• (2) [{…}, {…}] と {list: Array(2)} の違い
• どうしてこのような違いが出てしまうのか

の2点をお聞きしたいです。
よろしくお願いいたします...！！！

Answer 1

{list: Array(2)}は表示のとおり、listプロパティに配列の入ったオブジェクトです。配列として扱いたいならlistだけ取り出しましょう。

どうしてこのような違いが出てしまうのか

APIからどのような形の値が返ってくるかを考えていなかった、ということかと思います。

Comments

[Kanikama-chan]

golangでAPIを作っていたのですがその通りでした。ありがとうございます！