React Typescript: TypeError: Cannot read properties of undefined (reading 'map')

Question

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

这是声明 'users';

的代码

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 }
}

然后，我尝试映射 '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 中您实际上从未声明 [=11=] useState，因此在 UserManagement 中它将始终为 false，导致它在准备就绪之前尝试渲染 users。

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

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

React Typescript: TypeError: Cannot read properties of undefined (reading 'map')

React Typescript: TypeError: Cannot read properties of undefined (reading 'map')

javascript

typescript

reactjs

create-react-app

react-hooks