如何基于数组数据React渲染多个实例

Question

我有一个数组，其中的对象包含不同的坐标，例如：

bottomRow: 130.8201356
leftCol: 52.33386899
rightCol: 279.71340993
topRow: 48.9834268

我需要的是渲染基于此数据的正方形。数组中有多少不同的对象，就有多少个正方形。

我尝试过这段代码，但没有成功：

const FaceRecognition = ({imageUrl, box}) => {
     console.log('recog',box)
  return (
    <div className='item-e center ma'>
        <div className='absolute mt2 z-2'>
            <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                {   box.forEach(() => {
                    return (
                        <div className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}>
                        </div>
                    )
            }
                
                )
            }
        </div>
    </div>
  );

}

我应该如何解决这个问题，这样它才能获得所有的对象并渲染所有的方块？到目前为止，我不得不将或或任何其他数组索引放在box旁边，它只呈现那个对象。但我需要一次性渲染所有内容。

更新：

我尝试过box.map，如下所示：

const FaceRecognition = ({imageUrl, box}) => {
     console.log('recog',box)
  return (
    <div className='item-e center ma'>
        <div className='absolute mt2 z-2'>
            <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                { box.map(((topRow, rightCol, leftCol, bottomRow), idx) => {
                        <div key={idx} className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}>
                        </div>
                        }
                    )
                }
        </div>
    </div>
  );
}

仍然没有成功，我现在得到了Invalid parenthesized assignment pattern，但不知道为什么

Answer 1

首先，您应该使用映射，因为forEach将返回undefined。其次，你忘了在map/forEach中使用控制变量，你的map应该这样做：

​

const FaceRecognition = ({imageUrl, box}) => {
     console.log('recog',box)
  return (
    <div className='item-e center ma'>
        <div className='absolute mt2 z-2'>
            <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                {   box.map((element) => {
                    return (
                        <div className='bounding-box' style={{top: element.topRow, right: element.rightCol, bottom: element.bottomRow, left: element.leftCol}}>
                        </div>
                    )
            }
                
                )
            }
        </div>
    </div>
  );

}

​

你在那里使用的方框是完整的数组，所以不可能得到这个元素。

Answer 2

您应该尝试map函数，并在map函数中添加一个arg。

const FaceRecognition = ({ imageUrl, box }) => {
  return (
    <div className='item-e center ma'>
      <div className='absolute mt2 z-2'>
        <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt='' />
        {box.map((item) => {
          return (
            <div className='bounding-box' style={{ top: item.topRow, right: item.rightCol, bottom: item.bottomRow, left: item.leftCol }}>
            </div>
          )
        })
        }
      </div>
    </div>
  );
}

Answer 3

const FaceRecognition = ({imageUrl, box}) => {
    console.log('recog',box)
    return (
        <div className='item-e center ma'>
            <div className='absolute mt2 z-2'>
                <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                {box.map(({topRow, rightCol, leftCol, bottomRow}, idx) => (
                    <div
                       key={idx}
                       className='bounding-box'
                       style={{
                           top: topRow, 
                           right: rightCol, 
                           bottom: bottomRow, 
                           left: leftCol
                       }}>
                    </div>
                ))}
            </div>
        </div>
   );
}