React Hooks-useState初始化成为对象的空数组?

问题描述 投票:1回答:1

在下面的代码中,我相信我正在将gameList初始化为一个空数组。第一个console.log显示gameList是一个空数组。然后,我在useEffect()中使用console.log将gameList显示为一个对象,但我不认为我在做任何事情来转换gameList。谁能解释一下?我试图将对象数组传递给子组件,但是即使在gameList“ object”上使用Object.values()时,它仍然作为对象返回。谢谢!

Edit:也许我应该问的方式是:“为什么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;

javascript reactjs user-interface frontend
1个回答
2
投票

数组在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

© www.soinside.com 2019 - 2024. All rights reserved.