如何传递对象作为组件Props并仅修改单个属性值？

你的写法存在两个问题：一是直接修改了原author对象的age值，二是传递给data的不是完整对象，而是赋值操作返回的24这个数值，完全不符合需求。

下面是几种正确的实现方式：

方法一：对象展开运算符（推荐） #

这种方式不会修改原对象，而是生成一个包含修改后属性的新对象，是前端框架中处理props的常用方式：

<NextPage data={{ ...author, age: 24 }} />

原理：...author会展开原对象的所有属性，后面的age: 24会覆盖原对象中的age属性，最终生成一个新的完整对象，原author对象保持不变。

方法二：修改原对象后传递（不推荐） #

如果你确定不需要保留原对象的age值，可以先修改原对象，再传递整个对象：

author.age = 24;
<NextPage data={author} />

注意：这种方式会直接改变原author的age属性，可能导致其他使用该对象的地方数据异常，除非你明确需要这种副作用，否则不建议使用。

方法三：使用Object.assign #

和展开运算符效果类似，通过Object.assign生成新对象：

<NextPage data={Object.assign({}, author, { age: 24 })} />

原理：先创建一个空对象，接着把author的所有属性复制到空对象中，最后用{ age: 24 }覆盖对应的属性，得到最终的新对象。

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