如何使用React.js显示API数据在这个React教程中，我们将继续建立在上一个教程中的React Form之上。现

现在我们希望能够从API中获取数据，并以一种有意义的方式处理这些数据。要做到这一点，我们需要在App组件中利用数组来管理应用程序顶层的状态。然后，我们将设置其他几个组件，并通过props对象与它们共享状态。当我们向我们的状态数组添加新的数据对象时，React会自动更新UI。现在让我们看看如何建立这个。

用户数据输入

我们已经设置了一个表单，用户可以输入一个公司名称，然后点击进入。在这一点上，我们向Github rest API发出了一个API请求，并得到了数据。我们怎样才能利用这些数据呢？这就是我们在这里要看的东西。在这一点上，我们有这个表格，我们在这里看到。
react form to fetch api data

每次用户输入公司名称时，我们都会从API那里得到一个响应。因此，我们首先需要创建一个数组，用来保存我们从API那里得到的信息。这样，每次有新的公司名称加入时，我们就可以在数组中加入一个响应对象。这就是 companyinfoarray.此外，我们需要一个函数，在用户每次向表格中输入信息并点击进入时，将每个对象添加到数组中。这就是 **addCompany()**函数。

class App extends React.Component {
  state = {
    companyinfoarray: [],
  };

  addCompany = (companyinfo) => {
  	this.setState(prevState => ({
    	companyinfoarray: [...prevState.companyinfoarray, companyinfo],
    }));
  };

	render() {
  	return (
    	<div>
        <Form onSubmit={this.addCompany} />
    	</div>
    );
  }	
}

我们在这里要做的是把 companyinfo在App组件的状态上。这个对象追加到存储在 **companyinfoarray**中的对象。这个 setState函数在这里帮助我们，因为这是我们需要改变React类组件的状态的函数。我们向setState()传递一个函数，该函数可以访问之前的状态，而从该函数返回的内容则成为新的状态。我们可以返回 companyinfoarray其中的传播运算符被用来追加新的 companyinfo.这就相当于在数组上做了一个concat操作。 companyinfoarray数组进行连接操作。现在我们可以使用React Dev Tools来检查这是否有效。

非常好!每次用户输入一个公司名称并点击开始，我们可以在React Dev Tools中看到 companyinfoarray正在正确地填充。换句话说，每次我们从Github api得到一个响应，我们就把这个响应对象直接存储到React应用程序的状态中。

创建一个公司列表组件

我们的目标是显示所有的数据对象，我们将其存储在 companyinfoarray的状态中。我们可以通过创建一个主要工作是显示其他组件的React组件来做到这一点。换句话说，我们需要一个组件来创建一个组件的列表。我们可以从这里开始使用这段代码。

class CompanyList extends React.Component {
  render() {
      return (
          <div className="companylist">
          <span className="companylisttext"><CompanyList /></span>
          </div>
      );
  }
}

我们还使用了一些简单的CSS来帮助显示页面上的组件。

.companylist {
  border: thin solid blue;
  padding: 2rem;
  margin: 2rem;
  display: flex;
  flex-direction: column;
}

.companylisttext {
  position: relative;
  top: -47px;
  background: white;
  padding: 7px;
  width: 106px;
  color: blue;
}

这样我们就有了Form组件和CompanyList组件。不同颜色的轮廓只是为了帮助我们实现可视化。
react list component

从App组件向CompanyList组件传递状态

在上面的截图中注意到，在React Dev Tools中选择了CompanyList组件。在信息窗格中，我们看到没有与该组件相关的道具。那么，我们需要CompanyList组件能够访问 **companyinfoarray**状态。这意味着我们需要把它作为一个道具来传递。

class App extends React.Component {
  state = {
    companyinfoarray: [],
  };

  addCompany = (companyinfo) => {
  	this.setState(prevState => ({
    	companyinfoarray: [...prevState.companyinfoarray, companyinfo],
    }));
  };

	render() {
  	return (
    	<div>
        <Form onSubmit={this.addCompany} />
        <CompanyList companyinfoarray={this.state.companyinfoarray} />
    	</div>
    );
  }	
}

现在，当我们使用React Dev Tools，突出显示CompanyList组件时，我们可以看到该组件现在可以访问我们需要的数据。事实上，当我们输入一些新的公司到数组中时，我们的数组会立即在CompanyList组件中更新。非常酷

单一项目组件

我们还需要一个组件来使这个应用程序工作。这将是公司组件，它的工作是显示一个单一的公司。因此，让我们从公司组件的代码开始。

class Company extends React.Component {
	render() {
  	const p = this.props;
  	return (
    	<div className="company">
        <span className="companytext"><Company /></span>
    	  <img src={p.avatar_url} />
        <div className="companyinfo">
          <div>Name: {p.name}</div>
          <div>Email: {p.email}</div>
          <div>Bio: {p.bio}</div>
          <div>Repos: {p.public_repos}</div>
        </div>
    	</div>
    );
  }
}

在另一个组件中显示一个组件

所以上面的Company组件的目的是为了让我们能够使用CompanyList组件将其渲染出来。在下面突出显示的代码中，我们使用map函数来运行一个针对在 companyinfoarray.这对我们的作用是在每次有新的API响应被添加到数组中时，在CompanyList组件中渲染一个新的公司组件。

class CompanyList extends React.Component {
    render() {
        const p = this.props;
        return (
            <div className="companylist">
            <span className="companylisttext"><CompanyList /></span>
            {p.companyinfoarray.map(companyinfo => <Company key={companyinfo.id} {...companyinfo}/>)}
            </div>
        );
    }
}

现在我们测试一下这个应用程序，可以看到不同的组件一起工作来渲染数据。

如何使用React.js显示API数据摘要

在本教程中，我们建立了几个React组件来显示来自API的数据。Company组件用于显示公司的数据，而CompanyList组件用于将对象数组转换为公司组件的数组。Form组件从用户那里读取输入信息，而顶层的App组件将所有东西放在一起并管理所有其他组件之间的关系。companyinfoarray状态元素在顶层的App组件中。这样我们就可以在多个组件之间共享数据，而且它允许我们将新的API响应数据附加到用户界面上，只需将GitHub的API响应附加到该状态元素上。在Form组件中，我们探索了如何在onChange事件的帮助下，使用React的状态本身来读取输入元素。使用这种方法的组件被称为受控组件。

如何使用React.js显示API数据