React组件中用push将对象条目转数组失败，typeof仍返回object如何解决？

typeof操作符返回object是JavaScript的历史遗留特性，所有引用类型（包括数组）的typeof结果都是object，这个结果不能作为判断变量是不是数组的依据。你当前的转换逻辑本身没有问题，不需要纠结typeof的输出。

• 第一步先确认返回的用户列表结构：打印Array.isArray(response.Users)，如果返回true，说明response.Users本身就是数组，不需要循环push到新数组，直接赋值即可，优化后代码如下：

import { Auth, API } from 'aws-amplify'
import { useState, useEffect } from 'react'

export default function Users() {
  // 补全state声明，初始值设为空数组，避免渲染时报错
  const [data, setData] = useState([])

  const listUsers = async () => {
    const apiName = 'AdminQueries'
    const path = '/listUsers'
    const params = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `${(await Auth.currentSession())
          .getAccessToken()
          .getJwtToken()}`,
      },
    }
    return await API.get(apiName, path, params)
  }

  const usersArray = async () => {
    const response = await listUsers()
    // 兼容返回值是对象的场景，是对象就转成值的数组
    const users = Array.isArray(response.Users) ? response.Users : Object.values(response.Users)
    setData(users)
  }

  useEffect(() => {
    usersArray()
  }, [])

  // 渲染时加防御判断，避免数据未加载完成时报错
  return (
    <div>
      {Array.isArray(data) && data.map(user => (
        // 替换为你实际的渲染逻辑
        <div key={user.Username}>
          用户名：{user.Username}
        </div>
      ))}
    </div>
  )
}

• 如果你要验证变量是不是数组，使用Array.isArray(变量)方法即可，返回true就可以正常调用map等数组方法。

内容的提问来源于stack exchange，提问作者Henrique Monteiro