React 18赋值表达式报错：左侧需为变量或属性访问的解决问询

报错原因 #

data?.area?.width=['111','220'] 违反了JavaScript语法规则：可选链操作符?.不能出现在赋值表达式的左侧。这并非React 18的特性变更，而是该语法本身的设计限制——?.的作用是安全读取深层属性，其返回值可能是undefined，无法作为赋值的目标。

代码修改方案 #

需要先确保data和data.area存在，再进行赋值操作，以下是几种可行方式：

• 方案一：嵌套条件判断

  if (data && data.area) {
    data.area.width = ['111', '220'];
  }
  

• 方案二：逻辑与简化判断

  data && data.area && (data.area.width = ['111', '220']);
  

• 方案三：自动创建缺失的层级（如果需要）
  如果希望在data或data.area不存在时自动创建对应对象，可以手动初始化：

  // 确保data存在，不存在则初始化为空对象
  data = data || {};
  // 确保data.area存在，不存在则初始化为空对象
  data.area = data.area || {};
  // 此时可以安全赋值
  data.area.width = ['111', '220'];
  

或者使用更简洁的现代写法：

(data ??= {}).area ??= {};
data.area.width = ['111', '220'];

注：??=是ES2020的空值合并赋值运算符，仅当左侧为null或undefined时才会赋值。

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