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

Question

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

每行包含一个用户名列。

username列包含一个UserName反应组件。

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

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

我现在的问题是，我怎么才能发送一个每个唯一的用户名的ajax请求？

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

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

感谢

Answer 1

所以，你需要你的应用程序的数据存储不是你的演示文稿（在你的VirtualDOM树的叶子最后）组件中。

解决方案 - 获取父组件中的所有数据，然后将初始数据传递给每个组件。

你也必须为每一个独特组件执行Ajax请求，例如用于点击按钮的能力。这需要改变当前组件的状态，并触摸回调来更新父节点的全局状态。

Answer 2

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

您的父组件应该有一个usernames数组处于其状态。在父亲的componentDidMount()函数中，您填充usernames数组。它应该只有一个电话，假设你可以从你的后端获得多个用户名。

然后，在你render()功能，您可以使用map生成UserName组件：

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

需要的组件之间唯一的key。