我想这是将组件作为数组元素进行迭代的问题。我尝试了很多循环的迭代方法，.forEach((和.map((。有些结果只是来自第一个。它只渲染了数组中的一个组件，而著名的方法.forEach((和.map((根本没有渲染任何组件。
我将上面for循环中迭代器变量的值记录到控制台，它根本没有增加，当最大计数为10时，它是0。
这是代码：
const renderState = () => {
if (loading) {
// When the users objects are loading from the server:
return <p>Loading...</p>;
} else if (hasErrors) {
// When some loading-error occured:
return <p>Can not load the page.</p>;
} else {
// And when loading was successfully finished, rendering all of them:
for (let i = 0; i < users.length; i++) {
return <ProfileCard key={users[i].id} user={users[i]} />
}
}
};
我认为只有一个项目正在渲染，因为您正在返回一些东西"return语句结束函数执行，并指定要返回给函数调用方的值"-MDN文档
我在我的应用程序中有一个列表，上面写着：
{orders.map((order) => (
<Order key={order.Oid} data={order}/>
))}
因此，请尝试删除return语句。尝试使用.map
编辑：
在else语句中：
return {users.map((user) => <ProfileCard />)}
解决方案是将迭代函数(在这种情况下是.map((方法(放入React组件的直接返回语句中：
return (
<div>
{
users.map((user) => (
<ProfileCard key={user.id} user={user} />
))
}
</div>
);for (let i = 0; i < users.length; i++) {
return <ProfileCard key={users[i].id} user={users[i]} />
}
这里，当for loop开始迭代时，它转到return行。循环内部的返回告诉循环在此时中断执行流，并使用return获取任何内容。
这就是为什么只有一张个人资料卡出现的原因。
解决方案：
{array.map((item) => (
<Component key={item.key} data={item.data}/>
))}
使用这个map方法，您将在每次迭代中运行一个函数，并在每次迭代完成时返回一些内容。
因此，每次迭代都会创建一个新函数，返回一些Component。这就是为什么即使你有一个隐含的回报，这也是有效的