Question

我是React的新手，我正在使用JSX，我需要一种方法来遍历我拥有的对象数组。我使用了map方法，但是它在控制台中给了我这个错误：TypeError: boxes.map is not a function，其中boxes是包含对象的数组。

这是我的FaceRecognitionList组件代码：

import React from 'react';
import FaceRecognition from './FaceRecognition';

const FaceRecognitionList = ({ imageUrl, boxes }) => {
    console.log(boxes)
    return (
        <div>
            {
                boxes.map((box, i) => {
                    return (
                    <FaceRecognition
                    key={i}
                    left={boxes[i].leftCol} 
                    top={boxes[i].topRow} 
                    right={boxes[i].rightCol}
                    bottom={boxes[i].bottomRow}
                    imageUrl={imageUrl}
                    />
                );
            })
        }
        </div>
    );
}
export default FaceRecognitionList;

Answer 1

尝试

Object.entries(boxes).map(([key, vaue]) => console.log(key, value))

否则，请尝试

Object.keys(boxes).map(key => boxes[key])

如何在JSX中循环遍历对象数组？

1 个答案: