React无语法错误却报Cannot read properties of undefined (reading 'map')

报错根因 #

报错的核心原因是首次渲染时this.state.product.prices为undefined：

1. 初始化state时你给product赋值的是空对象{}，此时product.prices不存在，值为undefined
2. componentWillMount中的接口请求是异步的，接口返回数据之前，render函数已经先执行，此时走到this.state.product.prices.map逻辑，就会触发对应报错
3. 你写的else if (productFetched)判断不生效，因为空对象{}属于真值，首次渲染直接会进入调用map的分支

解决方案 #

以下任意一种方法都可以解决问题：

• 方案1：初始化state时给product添加默认的prices空数组
  修改constructor中的state定义：

  this.state={
      product: {
          prices: []
      },
      failedToLoad: false
  }
  

  首次渲染时prices是空数组，调用map不会报错，接口返回后会自动覆盖为真实数据。

• 方案2：调用map前添加存在性判断，可选链写法更简便
  修改报错位置的代码：

  { this.state.product.prices?.map(
      price =>{
          if (price.currency == selectedCurrency){
              return( <> { getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }</> )
          }
      }
  )}
  

  ?.为可选链运算符，只有当prices存在时才会调用map方法，否则直接返回undefined，不会触发报错。

• 方案3：调整渲染判断逻辑，确保product数据加载完整后再进入对应分支
  将原有else if (productFetched)修改为：

  else if (productFetched && Array.isArray(productFetched.prices))
  

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