Question

我希望使用reactJS 15.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 })
        })
    }

在console.log(json)中，我得到

但是当我点击按钮获取时出现此错误，因此getDataFromUser中出现错误：

未处理的拒绝（不变违规）：对象无效 React child（找到：带键的对象{id，nom，prenom， email，is_admin，created_at，updated_at}）。如果你打算渲染一个子集合，使用数组或使用包装对象来自React附加组件的createFragment（object）。

创建用户对象的原因是什么，所以任何人都可以帮我解决这个问题，谢谢你

Answer 1

它是对象数组，因此您需要使用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>
    );
}

Answer 2

您正在尝试在react组件中返回无效的对象/数组。在您的情况下，您应该尝试迭代数组（this.state.values）并呈现所需的项（字符串值）。

 render() {
    const { values } = this.state;
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {values.map((value, index) => 
                    (<div key={index}>{value.nom}</div>)
                )}
            </p>
        </div>
    );
}

查看错误，看起来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>
    );
}

如何在ReactJS中呈现对象数组

2 个答案: