反应中的功能图答案

【问题标题】：function map in react反应中的功能图
【发布时间】：2020-05-05 05:20:46
【问题描述】：

我是 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”，姓名：“teste”，电子邮件：“teste”，地址：{…}，城市：“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>)}
)

【问题讨论】：

您能否解释一下您是否有任何错误消息或您在哪里看到任何问题？控制台上result 变量的结构是什么？

标签： reactjs dictionary

【解决方案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>)}
)

【讨论】：

【解决方案2】：

只需删除{ ... }：

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

{ } 在组件内部用于插入表达式的结果。但是，您不在元素内（不在 <tag> ... </tag> 内），因此 { } 将仅表示代码块。

【讨论】：