如何基于数组数据渲染多个实例 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>
  );

}

我应该如何解决这个问题，以便获取所有对象并渲染所有正方形？到目前为止，我不得不将 [0] 或任何其他数组索引放在 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

您应该尝试使用 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 2

首先，您应该使用 map，因为 forEach 将 return 未定义。其次，你忘记使用map/forEach里面的控制变量了，你应该这样映射：

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 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>
   );
}

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

how to render multiple instances based on array data React

render

reactjs