ReactJS中映射对象数组到列表后无法获取数据排查

嘿，我帮你检查了代码，发现几个关键问题，这应该就是你遍历后拿不到数据的原因：

1. 明显的语法错误（最核心问题） #

你写的map回调函数里，对象字面量的括号结构完全错乱了——有被注释掉的多余括号，还有末尾错误的闭合符号，导致JS引擎根本无法正确解析这段代码，自然没法完成数组遍历。

你原来的代码：

const storyboardlist = action.payload.selectedBoardData.widgetList.map(widgetDataList => ({
  leftTarget: widgetDataList.leftTarget,
  rightTarget: widgetDataList.rightTarget,
  leftTargetValue: widgetDataList.leftTargetValue,
  rightTargetValue: widgetDataList.rightTargetValue,
  position: widgetDataList.position,
  //})),
}));
return { ...state, boardList: storyboardlist };

修正后的代码： #

// 先确保widgetList存在，避免空值报错
const widgetList = action.payload.selectedBoardData?.widgetList || [];
const storyboardlist = widgetList.map(widgetDataList => ({
  leftTarget: widgetDataList.leftTarget,
  rightTarget: widgetDataList.rightTarget,
  leftTargetValue: widgetDataList.leftTargetValue,
  rightTargetValue: widgetDataList.rightTargetValue,
  position: widgetDataList.position
}));

return {
  ...state,
  boardList: storyboardlist
};

2. 额外的健壮性建议 #

除了语法问题，建议你加上空值判断：比如用可选链?.和默认空数组|| []，防止action.payload.selectedBoardData或者widgetList不存在时抛出报错，这样代码会更稳定。

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