React如何将服务器响应对象合并至现有用户状态对象

你之前用setUser(user + res.data)不行，是因为JavaScript里对象不能用+拼接，这会把两个对象转成字符串后拼接成[object Object][object Object]，完全不是你要的合并效果。

要合并两个对象并更新状态，有两种简单常用的方法：

方法1：使用扩展运算符（推荐） #

扩展运算符...可以把对象的所有属性展开，生成一个新对象，把原用户状态和响应数据的属性都包含进去：

setUser({ ...user, ...res.data });

这里...user会展开原user的login和pass属性，...res.data展开响应里的xsrf和session属性，最终生成包含所有属性的新对象，符合你的需求。

方法2：使用Object.assign #

Object.assign方法可以把多个对象的属性复制到目标对象里，我们需要传入一个空对象作为目标，避免修改原状态对象：

setUser(Object.assign({}, user, res.data));

第一个参数{}是新的空对象，接着把user和res.data的属性依次复制进去，最后返回这个合并后的新对象，用来更新状态。

这两种方法都遵循了React状态不可变的原则，不会直接修改原user对象，而是生成新对象来更新状态。

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