React Hooks - useState 初始化成為對象的空數組？

Question

在下面的代碼中，我相信我將 gameList 初始化為一個空數組。 第一個 console.log 顯示 gameList 是一個空數組。 然后我在 useEffect() 中使用 console.log 將 gameList 顯示為一個對象，但我不相信我正在做任何事情來轉換 gameList。 誰能解釋一下？ 我試圖將一組對象傳遞給子組件，但即使在游戲列表“對象”上使用 Object.values() 它仍然作為對象返回。 謝謝！

編輯：也許我應該問這個問題的方式是：“為什么 gameList 作為一個對象出現在子組件中，而 gameList 作為屬性？為什么它沒有作為一個名為 gameList 的空數組到達 GameList 組件中？這正在發生在順便提交我的表格之前。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import GameList from './GameList';

const Searchbar = () => {
  const [searchString, setSearchString] = useState('');
  const [gameList, setGameList] = useState([]);

  console.log(gameList); // []

  useEffect(() => {
    console.log('gameList is ' + typeof gameList); // gameList is object
  });

  const requestGames = searchString => {
    axios
      .get(`http://localhost:3001/game/${searchString}`)
      .then(({ data }) => setGameList(data))
      .catch(e => console.log(e));
  };

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          requestGames(searchString);
        }}
      >
        <label htmlFor="search-string">Search</label>
        <input
          type="text"
          placeholder="search.."
          onChange={e => setSearchString(e.target.value)}
        />
      </form>
      <GameList gameList={gameList} />
    </div>
  );
};

export default Searchbar;

Answer 1

數組在 JavaScript 中具有類型object ：

 console.log(typeof []) //=> "object"

您可以在 MDN [1] 上閱讀有關typeof運算符的更多信息。

要檢查某個東西是否是一個數組，您可以這樣做：

 console.log(Array.isArray([])) //=> true

或這個：

 console.log(Object.prototype.toString.call([])) //=> "[object Array]"

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof