如何在reactjs组件中的浏览器上呈现JSON列表？

Question

我正在尝试获取json我从API收到的列表，并希望json在浏览器中呈现这些列表。我想出了如何从后端的REST API中获取数据，现在我想获取这些json列表并将其呈现在浏览器中。这是我学到的东西和尝试过的东西：

import React from 'react';

export default class peopleList extends React.Component {

    state = {

        values: []

    }

    componentDidMount() {

       fetch('http://localhost:3005/people')

        .then(function(res) {

            return res.json();

        }).then(function(json) {

            this.setState({

               values: json

            })

        });

    }

    render(){

        return <div className="drop-down">

            <p>I would like to render json list on the browser </p>

              <select>{

                 this.state.values.map((obj) => {

                     return <option value={obj.id}>{obj.name}</option>

                 })

              }</select>

            </div>;

    }

}

所需输出：

我创建了一个简单的面板框架，要在其中放置json列表数据。为了简单起见，我只想暂时显示每一行。我怎样才能做到这一点？谁能指出我如何更有效地完成这项工作？谢谢

在此附加输出中，我使用了示例面板框架，我想将json列表放在面板上。我承认这些数据虽然有所不同。

Answer 1

看起来数据并不能满足您的要求（ID和名称）。我对JSX有点陌生，但我认为您可能正在以语法更新和属性表示法更新的形式在下面寻找内容。return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="drop-down">&nbsp; &nbsp; &nbsp; &nbsp; <p>I would like to render json list on the browser </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.values.map(obj => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option value={obj.uin}>{obj.studentInfo.firstName}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>;);