Javascript 如何在ReactJS中渲染对象数组

我想获得使用

reactjs15.5

的用户列表，代码：

 constructor(props) {
   super(props);
        this.state = {
            values: []
        };
        this.getDataFromUser = this.getDataFromUser.bind(this);
    }

 render() {
        return (
            <div>
                <button onClick={this.getDataFromUser}>Fetch</button>
                <p>
                    {this.state.values}
                </p>
            </div>
        );
    }

 getDataFromUser(){
        fetch('http://localhost:8000/api/user')
            .then(response => response.json())
            .then(json => {
                console.log(json);
                this.setState({values: json })
        })
    }

构造函数（道具）{
超级（道具）；
此.state={
值：[]
};
this.getDataFromUser=this.getDataFromUser.bind（this）；
}
render（）{
返回(
取来

{this.state.values}

);
}
getDataFromUser（）{
取（'http://localhost:8000/api/user')
.then（response=>response.json（））
。然后（json=>{
log（json）；
this.setState（{values:json}）
})
}

在

console.log（json）

中，我得到

但我在单击按钮获取时出现此错误，因此getDataFromUser中的错误：

未处理的拒绝（不变冲突）：对象作为 反应子对象（找到：具有键{id，nom，prenom， 电子邮件，is_admin，创建于，更新于}）。如果你想呈现一个 子对象的集合，使用数组代替或使用 从React加载项创建片段（对象）

---

创建用户对象有一个原因，因此任何人都可以帮助我解决此问题，谢谢

您试图在react组件中返回无效的对象/数组。在您的例子中，您应该尝试遍历数组（this.state.values）并呈现所需的项（字符串值）

render（）{
const{values}=this.state；
返回(
取来

{values.map（（值，索引）=>
（{value.nom}）
)}

);
}

查看错误，this.state.values的新状态似乎是一个具有以下键的对象{id、nom、prenom、email、is_admin、created_at、updated_at}。所以下面的代码适用于美国

render() {
    const { values } = this.state;
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {values &&
                  <div>
                    {values.nom}
                    {values.prenom}
                    {values.email}
                    etc.
                  </div>
                }
            </p>
        </div>
    );
}

render（）{
const{values}=this.state；
返回(
取来

{值&&
{values.nom}
{values.prenom}
{values.email}
等
}

);
}

它是一个对象数组，因此需要使用

map

迭代数组，然后渲染特定值

像这样：

render() {
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {this.state.values.map(el => {
                    return <div key={el.id}>
                       <span>{el.email}</span>
                       <span>{el.nom}</span>
                       <span>{el.is_manager}</span>
                    </div>
                })}
            </p>
        </div>
    );
}

render（）{
返回(
取来

{this.state.values.map（el=>{
返回
{el.email}
{el.nom}
{el.is_manager}
})}

);
}

显示JSON响应，如果要获取用户数组，请使用该数组在某些标记中显示。我想您需要循环这个.state.values。@JaromandaX单击“获取”时出错button@Akram能否显示

console.log（json）的结果？@MayankShukla iadded@collison感谢您回答这个问题，但不为我工作要使第二个代码在构造函数中工作，请删除这个；我在每个对象中得到object数组[object，object，object…]，我有nom，email…，如果你返回一个数组，你需要使用第一个代码。并在构造函数中保留this.state={values:[]}。对第一个代码所做的更改请参阅。让我知道我是一个新手，我想问你，这是获取和解析json的最好方法吗？可以创建一个名为nom，id…，并在所有组件中使用的用户，感谢这两个libs都很好，但是它们处理事情的方式不同。查看此链接了解axios和fetch调用的区别和好处：如果您正在获取的数据是固定的，这意味着不依赖于任何用户输入，那么您可以直接在componentDidMount方法中进行此调用，而不是在单击按钮时进行此调用。
render() {
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {this.state.values.map(el => {
                    return <div key={el.id}>
                       <span>{el.email}</span>
                       <span>{el.nom}</span>
                       <span>{el.is_manager}</span>
                    </div>
                })}
            </p>
        </div>
    );
}