Javascript 无法分解属性'；网址'；属于'；引脚'；因为它是未定义的

我有一个小项目，从unsplash获取图像，即使我检查了很多次，我的代码中仍然有一个问题，我正在运行我的代码，但它总是给出这个错误，但我没有得到它。任何想法都将不胜感激

Mainboard.js

import React from 'react';
import styled from 'styled-components';
import Pin from './Pin';
function Mainboard(props) {
let { pins } = props; 
return (
    <Wrapper>
        <Container>
            {pins.map((pin, index) => {
                let {urls} = pin;
              return <Pin key={index} urls={urls}/>
            })}   
        </Container>
    </Wrapper>
  )}
 export default Mainboard;

从“React”导入React；
从“样式化组件”导入样式化；
从“./Pin”导入Pin；
功能主板（道具）{
设{pins}=props；
返回(
{pins.map（（pin，index）=>{
设{url}=pin；
返回
})}   
)}
导出默认主板；

Pin.js:

import React from 'react';
import styled from 'styled-components';

function Pin(props) {
let { urls } = props;
return (
    <Wrapper>
    <Container>
     <img src={urls?.regular} alt="pin"/>
    </Container>
 </Wrapper>
)}
export default Pin;

从“React”导入React；
从“样式化组件”导入样式化；
功能引脚（道具）{
让{url}=props；
返回(
)}
导出默认Pin；

我不认为主要问题是从未定义的对象进行破坏（这只是一个症状），但更多的问题是数据中有“漏洞”，即数组中有未定义的元素

如果在

pins

数组中存在

未定义的
元素，那么您可能应该在映射之前先过滤它们。一种快速的方法是对真实定义的值和虚假的未定义值应用
布尔构造函数，即
arr.filter（Boolean）

功能主板（{pins}）{
返回(
{pins.filter（Boolean）.map（（pin，index）=>{
const{url}=pin；
返回
})}   
);
}

当然，您应该首先确保正确维护数据数组，这样就不会引入“漏洞”。如果您添加主板的呈现方式，那么传递给它的道具值可能会更好地帮助优化。
您可以显示主板使用位置的代码吗？
pins
数组中的某些项未定义，
让{url}=pin
将引发错误。尝试使用
let{url}=pin？？{}
@tsecheukfung01 here App.js here for Mainboard.js，
function Mainboard({ pins }) {
  return (
    <Wrapper>
      <Container>
        {pins.filter(Boolean).map((pin, index) => {
          const {urls} = pin;
          return <Pin key={index} urls={urls}/>
        })}   
      </Container>
    </Wrapper>
  );
}