react中的函数映射

Question

我是react的新手，我有以下问题:我试图从get (axios)获取对象并使用地图在屏幕上播放，但我做错了，如果有人能帮助我，我将不胜感激。

请购单给我带来了以下物品：

0：{用户名："eqwe"，名称："weqeqw"，邮箱："eqwwqe"，城市："qweewq"，id："fxm8j"}

1：{用户名："sadsa"，名称："asdads"，邮箱："asdas"，城市："sddsadsa"，id："79ywn"}

2：{用户名："aaa"，姓名："aaa"，邮箱："aaaa"，城市："aaaaa"，id："8shpw"}

3：{用户名："ddd"，名称："ddd"，邮箱："dddd"，城市："ddd"，id："aourz"}

4：{用户名：“测试”，名称：“测试”，电子邮件：“测试”，地址：{…}，城市："teste"，…} ...

这是我的代码：

import {getUsers} from '../actions';


function Table(){

const [data, setData] = useState({data: []});

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, []);
return(
     {data.map((item) => 
     <div key={item.id}>{item.name}</div>)}
)

Answer 1

你不需要在状态中创建嵌套的对象。

import {getUsers} from '../actions';
function Table(){

const [data, setData] = useState([]);

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, []);
return(
     {data.map((item) => 
     <div key={item.id}>{item.name}</div>)}
)

Answer 2

只需删除{ ... }

return data.map(item => (
   <div key={item.id}>{item.name}</div>
));

组件中的{ }用于插入表达式的结果。但是，您不是在元素中(而不是在<tag> ... </tag>中)，因此{ }将只表示一个代码块。