React调用轮播组件时异步props报.map is not a function错误如何解决

问题根源 #

你遇到的报错核心原因是传入轮播组件的ImagesDevices不是数组，而是JSON字符串，具体有两处代码错误：

• 第一处：getServerSideProps返回props时，你对查询得到的数组deviceImages执行了JSON.stringify()，将其转为了字符串格式，且在主模板组件中没有对传入的ImagesDevices做反序列化解析
• 第二处：查询图片列表时你用了已经被JSON.stringify()处理过的deviceResult._id作为查询条件，该值是带双引号的字符串，和数据库中存储的deviceId格式不匹配，会导致查询不到对应图片

修复步骤 #

1. 修正图片查询逻辑，使用未序列化的设备ID查询
   修改getServerSideProps中的图片查询代码：

// 原代码
const deviceImages = await DeviceImageGallery.find({deviceId:deviceResult._id}).sort({order:1});
// 修改为用你已经查询到的原始设备ID
const deviceImages = await DeviceImageGallery.find({deviceId: iddevice}).sort({order:1});

2. 主模板中反序列化ImagesDevices
   在DeviceTemplate组件中解析data的代码后新增解析图片数组的逻辑：

const deviceInfo = JSON.parse(data);
// 新增以下代码
const parsedImagesDevices = JSON.parse(ImagesDevices);

3. 传入解析后的数组给轮播组件
   修改轮播组件调用代码：

// 原代码
<DeviceCarousel ImagesDevices={ImagesDevices}/>
// 修改为
<DeviceCarousel ImagesDevices={parsedImagesDevices}/>

4. 可选：新增容错判断避免异常
   在轮播组件中执行map前先判断是否为数组，避免空值/异常值导致报错：

{Array.isArray(ImagesDevices) && ImagesDevices.map((deviceimage) => {
  // 原有逻辑不变
})}

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