如何在条件判断下合并对象更新state？两种尝试均失败

你原来的两种写法都存在语法或逻辑问题，导致无法正确合并目标对象到state中，下面是错误分析和解决方法：

错误原因分析 #

1. 第一种写法的问题：

   setState({
     ...iniciSate,
     [foo == 'test' ? trueArr : falseArr]
   });
   

   这里的方括号[]是计算属性名语法，会把trueArr/falseArr这个对象转换为字符串"[object Object]"，最终state里会新增一个键为"[object Object]"的属性，值是对应的对象，而不是把对象的属性合并进去。

2. 第二种写法的问题：

   setState({
     ...iniciSate,
     {foo == 'test' ? ...trueArr : ...falseArr}
   });
   

   这属于语法错误，对象字面量中不允许直接在属性位置使用条件表达式+展开运算符的组合，JS引擎无法解析这种写法。

正确写法 #

写法一：先确定目标对象再展开 #

const trueObj = { a: true, b: true, c:true };
const falseObj ={ a: false, b: false, c: false };

// 先根据条件拿到要合并的对象
const targetObj = foo === 'test' ? trueObj : falseObj;
setState({
  ...iniciSate, // 保留原有state属性
  ...targetObj  // 合并目标对象的属性
});

写法二：直接在对象中展开条件结果 #

可以用括号包裹条件表达式，让JS引擎先计算出目标对象，再展开：

const trueObj = { a: true, b: true, c:true };
const falseObj ={ a: false, b: false, c: false };

setState({
  ...iniciSate,
  ...(foo === 'test' ? trueObj : falseObj)
});

另外建议把变量名trueArr/falseArr改成trueObj/falseObj，因为它们是对象而非数组，语义更准确。

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