我猜這是將組件作為陣列元素進行迭代的問題。我為回圈、.forEach() 和 .map() 嘗試了許多迭代方法。某些結果僅來自第一個結果。當著名的方法 .forEach() 和 .map() 根本沒有渲染時，它只渲染了陣列中的一個組件。
我從上面的 for 回圈中將迭代器變數的值記錄到控制臺，它根本沒有增加，它是 0，當最大計數為 10 時。
這是代碼：
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]} />
}
}
};
uj5u.com熱心網友回復：
我認為只有一項正在渲染，因為您要回傳一些東西。“return 陳述句結束函式執行并指定要回傳給函式呼叫者的值。” - MDN 檔案
我的應用程式中有一個串列，內容如下：
{orders.map((order) => (
<Order key={order.Oid} data={order}/>
))}
因此，請嘗試洗掉 return 陳述句。并嘗試使用 .map
編輯：
在 else 陳述句中：
return {users.map((user) => <ProfileCard />)}
uj5u.com熱心網友回復：
解決方案是將迭代函式（在本例中為 .map() 方法）放入 React 組件的直接回傳陳述句中：
return (
<div>
{
users.map((user) => (
<ProfileCard key={user.id} user={user} />
))
}
</div>
);uj5u.com熱心網友回復：
for (let i = 0; i < users.length; i ) {
return <ProfileCard key={users[i].id} user={users[i]} />
}
當for loop開始迭代時，它會轉到這一return行。并在回圈內回傳告訴回圈在該點以及return你得到的任何東西上中斷執行流程。
這就是只出現 1 個個人資料卡的原因。
解決方案：
{array.map((item) => (
<Component key={item.key} data={item.data}/>
))}
使用此map方法，您將在每次迭代中運行一個函式，并在每次迭代完成時回傳一些內容。
所以每次迭代都會創建一個新函式，該函式回傳一些組件。這就是為什么即使您有隱式回傳也可以使用的原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/527412.html