修改React状态初始化的对象属性是否会引发组件重渲染？

1. 你确实修改了原状态 #

creditNote是对象类型，在JS里属于引用类型。当你写const payload = creditNote;时，并没有复制出一个新对象，只是让payload和creditNote指向了内存里的同一个对象。所以你后续修改payload.creditNoteDate，实际上就是直接改动了原creditNote状态的属性值——这就是UI里日期会短暂变化的根本原因。

2. 是否触发组件重渲染？ #

分两种情况看：

• 单纯修改原状态对象的属性、但没调用setCreditNote的话，React不会主动触发重渲染，因为React是通过状态的引用变化来识别更新的。你看到的短暂变化，大概率是组件因为其他原因触发了重渲染（比如API请求前后的其他状态更新、父组件重渲染等），此时React会读取已经被修改的原状态，才导致UI跟着变了。
• 但这种直接修改状态的操作绝对是React的禁忌，违反了状态不可变更新的原则，会导致状态管理混乱，比如后续依赖这个状态的逻辑、useEffect监听等都可能出现预期外的问题。

3. 正确的解决方法：创建新对象隔离修改 #

要做API请求的payload但不碰原状态，你需要先创建原对象的副本，再修改副本的属性：

// 用展开运算符做浅拷贝，最简单直观
const payload = { ...creditNote };
const datearray = creditNote.creditNoteDate.split("-");
payload.creditNoteDate = `${datearray[1]}-${datearray[0]}-${datearray[2]}`;

// 或者用Object.assign实现拷贝
// const payload = Object.assign({}, creditNote);
// 后续修改逻辑同上

这样payload是一个全新的对象，修改它的任何属性都不会影响原creditNote状态，完美遵循React的状态管理规则。

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