React运行HorizontalScrollbar组件报data.map is not a function错误

React项目中通过props向HorizontalScrollbar组件传递data参数调用组件时，Chrome浏览器控制台抛出错误：
Uncaught TypeError: data.map is not a function

相关代码片段 #

HorizontalScrollbar.js 组件源码 #

import React from 'react';
import {Box} from '@mui/material';

const HorizontalScrollbar = ({data}) => {
    return (
        <div> 
           {data.map((item) => ( 
            <Box 
            key = {item.id || item}
            itemId = {item.id || item}
            title = {item.id || item}
            m = "0 40px"
            >
            {item}
            </Box>
            )
        )
            
    }
        </div>
)
}

export default HorizontalScrollbar;

父组件传递data prop的代码 #

<Box sx = {{position: "relative", width: "100%", p: "20px"}}>
    <HorizontalScrollbar data = {bodyParts} />
</Box>

map是数组原型上的遍历方法，报错说明组件渲染时接收到的data（即父组件传入的bodyParts）不是数组类型。
绝大多数触发场景是：bodyParts是异步接口返回的数据，初始值被设置为null、undefined、普通对象等非数组类型，组件首次渲染时接口数据还未返回，直接对非数组值调用map方法就会抛出该错误。少数情况是接口返回的数据本身不是数组类型，未做校验就直接传给了组件。

• 给组件props加默认值兜底：在解构data参数时设置默认值为空数组，即使父组件未传值、或者传值为undefined，也能保证data始终是数组类型。修改后的组件核心代码如下：

// 给data设置默认空数组
const HorizontalScrollbar = ({data = []}) => {
    return (
        <div> 
           {data.map((item) => ( 
            <Box 
              key={item.id || item}
              itemId={item.id || item}
              title={item.id || item}
              m="0 40px"
            >
              {item}
            </Box>
           ))}
        </div>
    )
}

• 修正父组件的数据源逻辑：如果bodyParts是state存储的异步数据，初始化时必须将默认值设为空数组[]，不要设置为null、{}等非数组值；接口返回数据后先做类型校验，确认是数组再赋值，避免异常数据传入组件。参考写法：

// state初始值设为空数组
const [bodyParts, setBodyParts] = useState([]);

// 接口请求逻辑加类型兜底
const loadBodyParts = async () => {
  const response = await fetch('对应接口地址');
  const result = await response.json();
  // 校验返回结果为数组再赋值，否则兜底为空数组
  setBodyParts(Array.isArray(result) ? result : []);
}

• 可选加固：在组件内增加类型判断，仅当data是数组时才执行map遍历，进一步避免异常数据导致的页面崩溃：

const HorizontalScrollbar = ({data}) => {
    return (
        <div> 
           {Array.isArray(data) && data.map((item) => ( 
            <Box 
              key={item.id || item}
              itemId={item.id || item}
              title={item.id || item}
              m="0 40px"
            >
              {item}
            </Box>
           ))}
        </div>
    )
}

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