React Typescript：TypeError：无法读取未定义的属性（读取“地图”）[重复]

Question

我正在尝试使用 axios 从 jsonplaceholder 获取的用户数据映射卡片组件。但是，当我尝试时，它返回“TypeError：无法读取未定义的属性（读取'map'）”。我尝试了网络上的所有解决方案，但均未成功。 请帮忙！

这是声明“用户”的代码；

export const useAllUsers = () => {
  const [users, setUsers] = useState<Array<User>>()
  const getUsers = useCallback(() => {
    axios
      .get<Array<User>>('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        setUsers(res.data)})
         .catch(() => {
           return <MessageError />
         })
         .finally(()=>{
           setLoading(false)
         })
  }, [])
  return { getUsers, loading, users }
}

然后，我尝试映射“用户”获取所有用户数据，如下所示：

export const UserManagement: VFC = memo(() => {
  const { getUsers, users, loading } = useAllUsers()
  useEffect(() => getUsers(), [])

  return (
    <>
      {loading ? (
        <div className=' flex justify-center items-center'>
          <div className='animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900'></div>
        </div>
      ) : (
        <div
          className='grid 
        grid-cols-2 mb-16 md:grid-cols-3 lg:grid-cols-4 sm:px-6 md:px-16'
        > 
           <div className='grid mx-auto'> 
            {users.map(user => (
              <UserCard
                key={user.id}
                userName={user.username}
                imageUrl='https://source.unsplash.com/random'
                userId={user.name}
              />
            ))}
          </div> 
        </div> 
       )} 
    </>
  )
})

用户类型只是有一堆用于用户数据的类型，所以我想这不是问题吗？

export type User = {
  id: number
  name: string
  username: string
  email: string
  hobbies: string
}

Answer 1

我认为您尝试在 get 请求完成之前映射您的用户，因此它是未定义的。尝试类似

{
  users &&
    users.map((user) => (
      <UserCard
        key={user.id}
        userName={user.username}
        imageUrl="https://source.unsplash.com/random"
        userId={user.name}
      />
    ));
}

Answer 2

您有一个loading“状态”来防止在获取任何数据之前尝试渲染项目，但是在useAllUsers 中，您实际上从未使用useState 声明loading，所以在@ 987654325@ 它将始终为 false，导致它在准备好之前尝试渲染 users。

要修复，你可以添加缺少的加载useState，我还建议将一个空数组作为数组类型状态的初始值，如下所示：

const [users, setUsers] = useState<Array<User>>([])