React中如何从API的JSON数组提取FloorPlan文件名并在Carousel展示

嘿，我看你遇到的问题是从API返回的字符串化JSON数组里提取图片文件名，然后在React Carousel里展示对吧？咱们先理清楚核心问题，再一步步修正代码：

问题核心 #

你拿到的FloorPlan字段是字符串格式的JSON数组（不是直接可用的JavaScript数组），而且当前代码里的banquetImageList没有正确关联到FloorPlan的数据，同时字段名也没对应上（JSON里是小写的fileName，但你代码里用了大写的FileName）。

修正步骤 #

1. 解析字符串化的JSON数组
   首先得把FloorPlan的字符串转换成JavaScript数组，用JSON.parse()就能搞定。记得要处理数据为空或者格式错误的情况，避免组件崩溃。

2. 调整JSX代码，关联正确的数据
   替换原来的banquetImageList.map为解析后的FloorPlan数组，同时使用正确的字段名fileName。

修正后的完整代码示例 #

render() {
  const banquetImg = this.props.IMG_BASE + this.props.RESTAURANT_BANNER_PATH;
  // 解析FloorPlan字符串，同时处理异常情况
  let floorPlans = [];
  try {
    // 先判断banquetImageList是否有数据，再取第一个元素的FloorPlan字段
    if (this.props.banquetImageList.length > 0) {
      floorPlans = JSON.parse(this.props.banquetImageList[0].FloorPlan);
    }
  } catch (error) {
    console.error('解析FloorPlan失败:', error);
  }

  return (
    <div className="photosSection">
      {floorPlans.length !== 0 ? (
        <div className="body">
          <div className="row">
            <Carousel showArrows={true}>
              {floorPlans.map((plan, index) => (
                <div key={plan.id} className="row">
                  <img 
                    src={`${banquetImg}/${plan.fileName}`} 
                    alt={`宴会厅平面图 ${index + 1}`}
                    key={plan.id} 
                  />
                  <p className="get-final-price">Get Final Price</p>
                </div>
              ))}
            </Carousel>
          </div>
        </div>
      ) : ""}
    </div>
  );
}

关键细节说明 #

• 异常处理：加了try-catch包裹解析逻辑，就算FloorPlan格式有误，也不会导致整个组件挂掉，还能在控制台看到错误信息。
• 字段名匹配：把原来的row.FileName改成了plan.fileName，和JSON里的字段名保持一致。
• Key值优化：用每个平面图的唯一id作为key，比索引更稳定，符合React的最佳实践。
• 无障碍优化：给图片加了alt属性，提升页面的可访问性。

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