React修改深层嵌套useState对象报错：Invalid left-hand side in assignment

我有一个ReactJS项目，其中存在一个层级极深的useState变量，结构如下：

{
  chart: { type: 'bar', height: 430 },
  plotOptions: { bar: { horizontal: false, dataLabels: { position: 'top' } } },
  colors,
  dataLabels: { enabled: true, offsetX: -6, style: { fontSize: '12px', colors: ['#fff'] } },
  stroke: { show: true, width: 1, colors: ['#fff'] },
  tooltip: { shared: true, intersect: false },
  xaxis: { categories: ["Mon", "Tue", "Wed", "Thru", "Fri", "Sat", "Sun"] }
}

我想要修改xaxis中的categories值，编写了如下代码：

if(days[index]==="Daily"){
  let temp = {...options};
  temp?.xaxis?.categories = chartData?.days?.days;
  setData(chartData?.days);
  setOptions(temp);
}

但触发了错误：

Invalid left-hand side in assignment expression. (72:6)
 70 |     if(days[index]==="Daily"){
 71 |       let temp = {...options};
> 72 |       temp?.xaxis?.categories = chartData?.days?.days;
     |       ^
 73 |       setData(chartData?.days);
 74 |       setOptions(temp);
 75 |     }

请问我哪里操作错误？是否不能以这种方式修改深层对象？

你出错的核心原因是不能把可选链操作符?.用在赋值语句的左侧。可选链的作用是安全读取深层属性，但它返回的要么是属性值，要么是undefined，没办法直接给这个临时结果赋值。

另外，你用{...options}只做了浅拷贝，xaxis还是原对象的引用，就算赋值成功也可能触发意外的状态突变，违反React状态不可变的原则。

正确的做法是逐层解构拷贝深层对象，确保每一层都是新的引用：

if(days[index] === "Daily"){
  const temp = {
    ...options,
    xaxis: {
      ...options.xaxis,
      categories: chartData?.days?.days || [] // 加默认值防止出现undefined
    }
  };
  setData(chartData?.days);
  setOptions(temp);
}

如果xaxis可能不存在，还可以补充判断处理：

if(days[index] === "Daily"){
  const temp = {
    ...options,
    xaxis: options.xaxis 
      ? { ...options.xaxis, categories: chartData?.days?.days || [] }
      : { categories: chartData?.days?.days || [] } // 若xaxis不存在则直接新建
  };
  setData(chartData?.days);
  setOptions(temp);
}

总结两点：

• 赋值操作的左侧不能用?.，它仅适用于属性读取场景
• 修改React深层状态时，必须做逐层的不可变更新，禁止直接修改原对象的引用

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