映射函数在反应 js 中抛出错误

Question

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

我成功地使用反应前端从后端获取我的数据。

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

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([])

如果你真的想遍历对象，你能做的最好的事情就是从对象中获取和排列并循环它 for ex:

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

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

映射函数在反应 js 中抛出错误

Map function is throwing errors in react js

javascript

javascript-objects

reactjs

react-native

react-map-gl