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

Question

考虑到我有一个数据列表。

每行包含一个用户名列。

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

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

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

我遇到的问题是，如何为每个唯一的用户名只发送一个 ajax 请求？

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

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

谢谢

score 4 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

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

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

2 回答 2