地图功能在反应js中引发错误

Question

我是 React js 的新手，很快就学会了开发静态网站。 因为我是 python 的忠实粉丝，所以我使用 Django-rest-framework 开发了我的后端。

我正在使用 react 前端成功地从后端获取我的数据。

我总是喜欢使用功能组件而不是状态组件。 我知道我需要映射我的状态对象才能在其中显示内容，但它会引发错误

TypeError: users.map is not a function

我不知道为什么，请指导我。一件重要的事情是我完美地将我的数据记录到控制台而不是在 return() 中。

以下是我的代码

import React,{useState,useEffect} from "react"
import{useHttpClient} from './components/http-hook'

const App=()=>{
  const[users,setuser]=useState({})
  const{isLoading,error,sendRequest,clearError}=useHttpClient()


  useEffect(() => {
    const fetchUsers=async()=>{
      try{
        const responseData=await sendRequest("http://127.0.0.1:8000/backend/list/")
        setuser(responseData)
      }
      catch(err){console.log(err)}
    }
   fetchUsers()
  }, [sendRequest])

  const fetchUserslist=async=>{
    console.log(users)
  }

    return(<div>
      <button onClick={fetchUserslist}>See list</button>
      <ul>
    {users.map(user=><div>{user.name}</div>)}
      </ul>
      </div>

    )
}

export default App

我已经创建了自己的自定义钩子 useHttpClient 来处理数据并且没有任何抱怨

Answer 1

如我所见

const[users, setuser]=useState({})

你已经向用户发起了一个对象，它不是一个数组，所以当我们尝试 users.map 时，它最终会出现上述错误

要执行 .map 操作，它必须初始化为一个数组，如下所示

const[users,setuser]=useState([])

---

如果你真的想遍历对象，你能做的最好的事情就是从对象中取出数组并循环它：

const obj = {name: "hello", age: 23};

Object.keys(obj).map((key) => <div>{obj[key]}</div>)