使用axios拉取API数据后无法将tags数组渲染到Semantic UI Label组件

该报错是异步请求数据的时序问题导致：组件首次渲染时，axios接口请求尚未完成，你传递给ProductInfo组件的tags属性此时为undefined，调用undefined的map方法就会抛出对应错误。首次加载偶尔正常是极小概率下接口响应速度极快，在组件首次渲染前就完成了数据赋值，刷新后请求时序变化就会触发报错。

你可以任选以下任意一种方案修复：

• 方案1：直接在渲染处加兜底逻辑
  将原渲染代码改为可选链+空数组兜底的写法，避免undefined调用map：

  <div className="product tags flex container child">
    {(props.tags ?? []).map((tagsList, i) => (
      <Label size="tiny" as="a" image key={i}>
        {tagsList}
      </Label>
    ))}
  </div>
  

• 方案2：初始化数据时给tags默认空数组
  在父组件存储接口返回数据的state初始化时，就给tags字段设置默认空数组，避免初始值为undefined：

  // 父组件中state的初始化示例
  const [productInfo, setProductInfo] = useState({
    tags: [],
    // 其他字段的默认值可按需补充
  })
  

• 方案3：增加条件渲染判断
  仅当tags是数组类型时才渲染标签列表：

  <div className="product tags flex container child">
    {Array.isArray(props.tags) && props.tags.map((tagsList, i) => (
      <Label size="tiny" as="a" image key={i}>
        {tagsList}
      </Label>
    ))}
  </div>
  

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