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

【问题标题】：Loop through json object and display the data with React?循环 json 对象并用 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>
}

}

【问题讨论】：

标签： json reactjs loops state

【解决方案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”数组，也可以尝试使用钩子:)

【讨论】：