React Unsplash图片获取项目报错：Cannot destructure property 'urls' of 'pin' as it is undefined

报错本质 #

触发该报错的逻辑没有任何歧义：在Mainboard组件执行pins.map遍历时，回调函数内拿到的某一个遍历项pin的值为undefined，此时直接对其执行解构取urls属性，JS引擎就会抛出该运行时错误。

可落地的排查修复步骤 #

• 为pins属性增加入口兜底
  异步加载场景下，组件首次渲染时接口通常还未返回数据，此时传入的props.pins可能不是空数组，而是undefined。可在解构props时给pins设置默认空数组值，避免无意义的遍历触发报错，写法为const { pins = [] } = props。
• 在map循环内增加空值拦截
  即便pins是合法数组，也可能因接口返回结构异常、数据处理逻辑疏漏，导致数组内部混入null、undefined类无效值。在循环回调中拿到pin之后，先判断其有效性，无效项直接跳过渲染，不要直接执行解构操作。
• 全链路校验数据结构
  从Unsplash接口请求发起的节点开始，逐环节打印日志确认数据流正确性：
  • 确认接口返回的图片集合层级：Unsplash接口通常将图片列表挂在response.data.results字段下，若错将整个response对象作为pins传入，会直接导致数组结构异常
  • 确认数组内每一项图片对象，是否真的携带urls属性，避免字段映射错误丢失核心字段
• 为所有跨组件传值增加空值兜底
  对外部数据源、异步传入的数据不要做非空假设，比如给Pin组件传urls属性时，若urls不存在则传入空对象做兜底，避免下游组件因取值报错。

修正后的Mainboard参考代码 #

import React from 'react';
import styled from 'styled-components';
import Pin from './Pin';

function Mainboard(props) {
  // 给pins增加默认空数组兜底
  const { pins = [] } = props; 
  return (
    <Wrapper>
        <Container>
            {pins.map((pin, index) => {
                // 拦截无效pin项
                if (!pin) return null;
                const { urls } = pin;
                // 给urls增加空对象兜底
                return <Pin key={index} urls={urls ?? {}}/>
            })}   
        </Container>
    </Wrapper>
  )
}
export default Mainboard;

内容的提问来源于stack exchange，提问作者user10991969