Javascript typeof() 运算符正在向已知变量类型返回不同的值

Question

嘿，当我 console.log(typeof(variable) 与 console.log(variable) 相比时，我遇到了一个奇怪的错误。
在控制台中，变量显然是一个对象数组，但是当我 console.log typeof 它说它是一个 object.
我正在从一个 API 然后尝试将数据呈现为 React。
我想我不能 map 通过数据，因为它认为它是一个对象。
非常感谢任何帮助，谢谢！

下面是我的 RenderDrink 组件

import React from 'react'

function RenderDrinks(props) {
    console.log(typeof(props.data))
    console.log(props.data)
    
  return (
        
           props.data && props.data.map(drink => {
                <>
                    <h2>{drink.strDrink}</h2>
                    <p>{drink.strGlass}</p>
                    <p>{drink.strImageSource}</p>
                    <p>{drink.strInstructions}</p>
                    {/* <p>{drink.str}</p>
                    <p>{drink.str}</p> */}
                    
                </> 
            })
        
  )
}

export default RenderDrinks

下面是我的 ApiFetch 组件

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

const FetchApi = () => {
  const [data, setData] = useState([]);

  const fetchDrinks = async () => {
    
   await axios.get('https://www.thecocktaildb.com/api/json/v2/9973533/popular.php')
   .then((res) => {
      const allDrinks = res.data.drinks
      setData(allDrinks)
      console.log(typeof(data))
    }) 
    .catch(error => console.error(`Error: ${error}`))
  }

  useEffect(() => {
    fetchDrinks()
  }, [])
    
  return (
    <>
      <RenderDrinks data={data} />
    </>
  )
}

export default FetchApi

Answer 1

那是因为 array 的类型是 object

如果要测试数组的变量，可以使用：

if (data.constructor === Array)
   console.log('it's an array');

您还可以使用 isArray() 来检查它是否是这样的数组：

if(typeof data === 'object' &&  
Array.isArray(data)) {
    //Its an array
}

Javascript typeof() 运算符正在向已知变量类型返回不同的值

Javascript typeof() operator is returning a different value to the known variable type

javascript

arrays

typeof

javascript-objects

reactjs