-1

我是 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 来处理数据并且没有任何抱怨

4

1 回答 1

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>)
于 2020-06-26T07:18:39.313 回答