React Hooks - useState инициализирует пустой массив, который становится объектом?

Question

В следующем коде я полагаю, что инициализирую gameList как пустой массив. Первый console.log показывает, что gameList - это пустой массив. Затем я использую console.log в useEffect (), который отображает gameList как объект, но я не верю, что делаю что-либо для преобразования gameList. Кто-нибудь может объяснить это? Я пытался передать массив объектов дочернему компоненту, но даже после использования Object.values ​​() в «объекте» gameList он все еще возвращается как объект. Спасибо!

Редактировать : Возможно, я должен был задать следующий вопрос: «Почему 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

Массивы имеют тип object in JavaScript:

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

Вы можете узнать больше об операторе typeof в MDN [1].

Чтобы проверить, является ли что-то массивом, вы можете сделать это:

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