TypeError: boxes.map不是一个函数

Question

不知道我做错了什么，但是当我试图在我的应用程序中检测到一张脸时，我得到了下面的错误消息

​

我做错什么了？见下面的代码

导入反应从' React '；import‘./Faceognition.css’；

const FaceRecognition = ({ imageUrl, boxes }) => {
  return (
    <div className='center ma'>
      <div className='absolute mt2'>
        <img id='inputimage' alt='' src={imageUrl} width='500px' heigh='auto' />
        {boxes.map((box, i) => {
          return (
            <div
              key={i}
              className='bounding-box'
              style={{ top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol }}></div>
          );
        })}
      </div>
    </div>
  );
};

export default FaceRecognition;

Answer 1

boxes可能不是数组。返回JSX之前的console.log(boxes)，以查看实际的框是什么

Answer 2

让我们看一下下面的示例：

const List = ({ items }) => {
  return (
    <div>{items.map(item => <p>{item}</p>)}</div>
  );
}

const Home = () => {
    [items, setItems] = useState();
    useEffect(() => {
        setItems(["first","second","etc"]);
    }, []);
    return (
        <div><List items={items} /></div>
    );
};

这将导致同样的错误，因为项在第一个实例中不是一个数组，它没有初始化：

[items, setItems] = useState();

在这种情况下，useState接收作为初始状态的参数。要修复此错误，应使用空数组初始化状态，以便使用map方法：

[items, setItems] = useState([]);

因此，在生命周期之后，它将呈现给出一个空数组的List组件，然后会触发map方法。您还可以通过在未定义对象或未传递支柱时提供默认param来修复此问题。

const List = ({ items = [] }) => {
  return (
    <div>{items.map(item => <p>{item}</p>)}</div>
  );
}

这样，即使您不传递项目支柱，它也会有一个空数组。