Javascript 我想使用react和next.js从一个对象映射我的数组，它'；它是一个使用钩子的函数组件

我正在尝试映射我的数组。数组位于如下所示的对象中：

const data = {data: (6) [{…}, {…}, {…}, {…}, {…}, {…}],
page: 2,
per_page: 6,
total: 12,
total_pages: 2}

我试着冷静一点，对状态、react函数组件和next.js使用react钩子。 除了数组的映射之外，其他一切都正常工作。我甚至可以打印出data.data.length，只是不需要数组本身，有什么想法吗

myComponent：

import React, { useState, useEffect } from "react";

function UserList() {
  const [data, setData] = useState<any>("");
  const [loading, setLoading] = useState<boolean>(true);
  //useEffect only fires getUsers() after DOM first loads or changes
  useEffect(() => {
    getUsers();
  }, []);
  async function getUsers() {
    setLoading(true);
    fetch("https://reqres.in/api/users?page=2")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  }

  return loading ? (
    <div>...Data Loading.....</div>
  ) : (
    <div>
      {data.data.map((item, i) => {
        <div>{item.first_name}</div>;
      })}
    </div>
  );
}

export default UserList;

import React，{useState，useffect}来自“React”；
函数UserList（）{
const[data，setData]=useState（“”）；
const[loading，setLoading]=useState（true）；
//useEffect仅在DOM首次加载或更改后激发getUsers（）
useffect（（）=>{
getUsers（）；
}, []);
异步函数getUsers（）{
设置加载（真）；
取回（“https://reqres.in/api/users?page=2")
.then（（response）=>response.json（））
。然后（（数据）=>{
setData（数据）；
设置加载（假）；
控制台日志（数据）；
})
.catch（（错误）=>{
console.log（错误）；
设置加载（假）；
});
}
退货(
…数据加载。。。。。
) : (
{data.data.map（（项目，i）=>{
{项目名称}；
})}
);
}
导出默认用户列表；

这是使用

加载？

的条件，如果我使用

如果else

方法，我可以返回映射的div

返回{item.first\u name}

if（加载）{
返回…数据加载。。。。。；
}否则{
返回data.data.map（（项目，i）=>{
返回{item.first_name}；
});
}
您不是从
map
返回的
返回{item.name}
为什么要将
数据
键入为
any
，将其初始化为字符串，然后尝试映射到可能存在或不存在的属性上（我不知道，因为这里没有类型信息）？您希望API调用返回的对象的形状是什么？噢，好的catch@Dupocas。OP，您希望在映射函数的返回值周围使用paren，而不是大括号。
if (loading) {
    return <div>...Data Loading.....</div>;
  } else {
    return data.data.map((item, i) => {
      return <div>{item.first_name}</div>;
    });
  }