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

Question

我正在尝试获取从 API 收到的 json 列表，并希望在浏览器上呈现这些 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

如果没有确切地看到这里发生了什么，并且您没有发布您正在使用的实际代码和 json 输出，我真正能做的就是猜测问题是什么。

首先，您发布的 json 输出与您尝试获取的值不同。您发布的 json 输出中没有名称或 id 值。

下一个在您的 componentDidMount() 中function 最佳实践是使用箭头函数绑定(bind)到类。

下一个 react 组件的组件名称的第一个字母应为大写字母，因此 <peopleList/>将被视为 html 元素而不是 React 组件。如果您在控制台中没有收到任何错误，则这可能就是问题所在。

然后您可能无法从 api 获取正确的 json，或者根本没有 json，或者它没有记录到状态。尝试在渲染后将状态记录到控制台，并查看 json 是否已发布到您的状态中的值。如果是，请确保您获得有效的 json 标记并且您的值正确。

还有一些其他问题可能是问题，但这些是主要问题。我整理了一个示例供您查看以下链接 Json Output Example CodeSandbox确保您访问此示例并与您的代码进行比较。在左侧打开 PeopleList 组件。

对于您的用例，我将在您的父组件中将人员列表设置为 <PeopleList/>然后你的组件将如下所示:

import React from "react";

export default class PeopleList extends React.Component {
  state = {
    values: []
  };
  componentDidMount() {
    fetch("http://localhost:3005/people")
      .then(res => res.json())
      .then(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 key={obj.id} value={obj.id}>
                {obj.name}
              </option>
            );
          })}
        </select>
      </div>
    );
  }
}

此外，如果您使用上面发布的 json 输出，您将使用以下内容:

<option key={obj.uin} value={obj.uin}>
  {obj.studentInfo.FirstName}
</option>

如果您有任何其他问题，请告诉我。