任何人都知道為什么這不會生成任何組件？
sArray 是一個二維陣列，其結構類似于框 [[1,2],[4,4]]，但它是 5x5
{
sArray.map( (array) => {
console.log('inthemap');
array.forEach(element => {
console.log('intheEach');
return (
<div>
<S ticketValue={element}> </S>
</div>
)
});
})
}
當我運行該頁面時，控制臺會記錄 InTheMap，然后是 InTheEach 5 次，它會執行 5 次。這意味著我正在制作 25 個 S 組件，但它們沒有出現。
當我洗掉 forEach 時，S 組件確實出現了。
uj5u.com熱心網友回復：
我在上面看到了兩個問題：
- 您缺少
return內部回圈的陳述句 - 您應該使用
map而不是forEach因為您要回傳
{
sArray.map((array) => {
// you forget to return this
return array.map(element => {
return (
<div>
<S ticketValue={element}> </S>
</div>
)
})
})
}
另請注意，這具有 O(n^2) 的運行時復雜度，這對于較小的陣列可能沒問題，但隨著它們的大小增長，性能會呈指數級下降。
您可能希望將其從render方法外部移動并計算useMemo以防止不必要的重新渲染：
https ://reactjs.org/docs/hooks-reference.html#usememo
// compute this value only once (or add dependencies for when it should update)
const myExpensiveRender = useMemo(() => {
return sArray.map((array) => {
return array.map(element => {
return (
<div>
<S ticketValue={element}> </S>
</div>
)
}
},[])
return (
<>
{myExpensiveRender}
</>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482093.html
標籤：javascript 反应