在 ReactJS 中，我可以多次显示 SAME 组件吗？答案

【问题标题】：In ReactJS, can I display the SAME component multiple times?在 ReactJS 中，我可以多次显示 SAME 组件吗？
【发布时间】：2017-02-20 07:08:08
【问题描述】：

假设我有一个数据列表。

每一行包含一个用户名列。

用户名列包含一个用户名反应组件。

UserName 组件在其 componentDidMount() 中执行 ajax 请求以从 HTTP GET 获取实际用户名。

多行将包含相同的用户名。

我的问题是，我怎样才能为每个唯一的用户名只发送一个 ajax 请求？

目前发生的情况是每个 UserName 组件都在发送自己的 ajax 请求以从 HTTP GET 获取用户名。

请注意，我不使用 redux，所以这不是解决方案。

谢谢

【问题讨论】：

【解决方案1】：

您可以在父组件中调用AJAX函数，并确保数据列表的每个子组件都有一个键。

您的父组件的状态应该有一个usernames 数组。在父级的componentDidMount() 函数中，您填充usernames 数组。假设您可以从后端获取多个用户名，这应该只是一个调用。

然后，在您的render() 函数中，您可以使用map 生成UserName 组件：

this.state.usernames.map((un, i) => {
  return <UserName key={i} {...un} />
})};

key 是组件之间唯一性所必需的。

【讨论】：

【解决方案2】：

因此，您需要将应用程序的数据存储在您的演示文稿（VirtualDOM 树中的最后一个叶子）组件中。

您的解决方案 - 在 componentDidMount 方法中获取父组件内的所有数据，然后将您的 initial 数据传递给每个组件。

您还可以为每个独特的组件执行 ajax 请求，例如按钮单击。即需要改变当前组件的状态，并触摸回调来更新父组件的全局状态。

【讨论】：