React中如何在this.state中同时包含外部变量与自定义对象？

DevOps 小满

2026-5-25

问题解决：React中合并initialState与自定义state属性的正确姿势

嘿，你遇到的问题其实是个典型的对象赋值语法错误！咱们先看看你原来的代码哪里出问题了：

this.state = initialState, data: [], myList: ''

这里的逗号可不是用来合并对象属性的，它是JavaScript里的逗号运算符——这个运算符会依次执行每个表达式，最后只返回最后一个表达式的结果。所以你的代码相当于把this.state最终设成了''（也就是myList的值），自然就看不到initialState和data的内容啦。

正确的两种写法

要把initialState的属性和你自定义的data、myList合并到this.state里，推荐这两种方式：

1. 对象展开运算符（ES6+，最简洁）

这种方式用...把initialState的所有属性展开到新对象里，再加上你的自定义属性：

const initialState = { 
  input: '', 
  imageUrl: '', 
  box: {}, 
  route: 'signin', 
  isSignedIn: false, 
  user: { id: '', name: '', email: '', entries: 0, joined: '' } 
}

class App extends Component { 
  constructor() { 
    super(); 
    this.state = {
      ...initialState, // 把initialState的所有属性都放进来
      data: [], 
      myList: '' 
    }
  }
}

2. Object.assign()方法（兼容性更好）

如果你的项目需要兼容旧版浏览器，可以用Object.assign()来合并对象：

const initialState = { 
  input: '', 
  imageUrl: '', 
  box: {}, 
  route: 'signin', 
  isSignedIn: false, 
  user: { id: '', name: '', email: '', entries: 0, joined: '' } 
}

class App extends Component { 
  constructor() { 
    super(); 
    this.state = Object.assign({}, initialState, {
      data: [], 
      myList: '' 
    })
  }
}

这里第一个空对象是为了避免直接修改initialState本身，保证它的纯净性。