遍历json对象并使用React显示数据？

Niqqo 发表于 Dev

尼可

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

任何帮助表示赞赏。

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>
}

}

阿里·萨萨尼

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

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>
        )}
)}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。