地图内的 ForEach Javascript React 未显示

Question

有人知道为什么这没有生成任何组件吗？

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 组件确实出现了。

Answer 1

我在上面看到了两个问题：

您缺少用于内循环的 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 进行计算以防止不必要的 re-renders： 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}
  </>
)

地图内的 ForEach Javascript React 未显示

ForEach inside of a map Javascript React not showing up

javascript

reactjs