循环 json 对象并用 React 显示数据？

Posted 2023-02-22

【中文标题】循环 json 对象并用 React 显示数据？

【英文标题】：Loop through json object and display the data with React?

【发布时间】：2021-05-08 18:50:14

【问题描述】：

我得到的 api 响应里面有 10 个对象，我想做出反应以显示人员姓名和性别。我不确定如何做到这一点。状态是否是解决此问题的正确方法，还是我应该尝试将我的响应仅保存在数组中？

感谢任何帮助。

state = 
        Person: null,
        Gender: null      

    
async componentDidMount() 
    const url = "**********************************************";
    const response = await fetch(url);
    const data = await response.json();
    this.setState(Person: data[0].Name)
    this.setState(Gender: data[0].Gender)

    

render() 
    return  <div>
        <p>
        this.state.Person
        </p>

        <p>
        this.state.Gender
        </p>

【参考方案1】：

是的，您应该将数据存储在 state 中并将其映射以显示每个人的姓名和性别。

async componentDidMount() 
    const url = "**********************************************";
    const response = await fetch(url);
    const data = await response.json();
    this.setState( data )

    

render() 
    return(
        this.state.data.map((el, id)=> 
        <div>
        <p>Name:el.Name</p>
        <p>Gender:el.Gender</p>
        </div>
        )
)

【讨论】：

如果它解决了您的问题，请告诉我。

我对 React 很陌生，所以我目前正试图在我的项目中实现它。我遇到了这个问题：× TypeError: Cannot read property 'map' of undefined，我猜我做得不对。

我成功了，我在哪里可以阅读更多关于这个的信息？这样我才能真正了解幕后发生的事情？谢谢你的帮助:)

嗯，在我看来，react 的文档是最好的资源，因为他们编写的内容非常丰富且简单。当我开始学习 Mosh 时，我还发现 youtube (youtube.com/watch?v=Ke90Tje7VS0) 上的视频非常有用且简单。

【参考方案2】：

绝对应该使用“Persons”数组，也可以尝试使用钩子:)