React中修改State数组与对象的正确方式
本文详解React中如何正确修改State中的数组和对象。通过setState接收函数的方式，确保基于最新状态进行更新，避免直接修改原数据。结合Vue与React对比，阐述函数式编程中不可变性的核心原则，并提供删除元素、合并对象及修改深层属性等常见场景的代码示例。
在React中修改State中的数组或对象数据时，需要特别注意更新机制。
首先，在修改状态数据（State）时，必须遵循React的规则，使用setState()方法进行更新。
当需要修改的数据是数组或对象时，仅传递一个对象给setState往往无法满足需求，此时应当传递一个函数。
该函数的参数state即为组件当前的State数据。你可以在函数内部对参数中的state进行修改，然后通过键值对的形式返回新的状态。
handlerWorkType(item, index) {
this.setState((state) => {
for(let i = 0; i < state.submitWorksList.length; i++) {
if(state.submitWorksList[i] == item.id) {
state.submitWorksList.splice(i, 1)
state.worksTypeList[index].activeShow = false
return {
submitWorksList: state.submitWorksList,
worksTypeList: state.worksTypeList
}
}
}
state.submitWorksList.push(item.id)
state.worksTypeList[index].activeShow = true
return {
submitWorksList: state.submitWorksList,
worksTypeList: state.worksTypeList
}
})
}需要注意以下几点关键事项：
必须在完成数据修改后，再通过键值对返回结果。
避免调用其他方法并将返回值赋值给变量，这种做法往往得不偿失。
React在修改数组和对象时有其特定的注意事项。
React开发倡导函数式编程，其重要特性之一是数据的不可变性。这意味着你不能直接更改数据，若要修改，必须复制数据副本进行修改。
通过对比Vue和React两个框架给数组添加元素的实现方式，可以更清晰地理解这一差异。
在Vue中：
export default {
name: "home",
data() {
return {
testArr: ['苹果','香蕉']
};
},
created(){
this.testArr.push('橘子')
}
};
...在React中：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
testArr: ['苹果','香蕉']
};
}
componentDidMount(){
this.setState({
testArr:[...this.state.testArr,'橘子']
})
}
render(){
return (
<React.Fragment>
<p>{this.state.testArr}</p>
</React.Fragment>
)
}
}这里可以看出两个框架的细微差别：Vue直接修改原数组，而React不修改原数组，而是创建一份新数组，再通过setState赋值。初学者可能会觉得这增加了代码复杂度，但这是React的设计初衷。
React遵循函数式编程规范，不推荐直接修改原始数据。如需更改，必须生成原始数据的转换副本。因此，函数式编程中总是生成新数据，而非直接修改原数据。
以下是一些常见的React修改数组或对象的示例，所有函数均不改变现有数据，而是返回新的数组或对象。
删除数组中的指定元素：
//删除testArr中的樱桃
...
constructor(props) {
super(props);
this.state = {
testArr: ['苹果','香蕉','橘子','樱桃','橙子']
};
}
componentDidMount(){
this.setState({
testArr:this.state.testArr.filter(res=>res!=='樱桃')
})
}
...合并两个对象：
...
constructor(props) {
super(props);
this.state = {
testObj1:{
chineseName:'橘子',
englishName:'orange'
},
testObj2:{
color:'yellow',
shape:'circle'
},
testObj:{}
};
}
componentDidMount() {
this.setState({
testObj: Object.assign(this.state.testObj1,this.state.testObj2)
})
}
...修改多层级对象的值：
//testObj的apple的color改成green
...
constructor(props) {
super(props);
this.state = {
testObj: {
banner: {
name: '香蕉',
color: 'yellow'
},
apple: {
name: '苹果',
color: 'red'
}
}
};
}
componentDidMount() {
this.setState({
testObj: {
...this.state.testObj,
apple:{
...this.state.testObj.apple,
color:'green'
}
}
})
}
...以上为个人经验总结，希望能为大家提供参考。
React 与 Vue 3 核心差异解析：技术选型参考
2026-11-05 13:25:04
利用JS三目运算符简化React和Vue组件中的条件渲染
2026-11-05 12:50:09
Vite 与 Webpack 在 React 项目中的配置差异
2026-11-05 10:13:11
React Hooks 实战：useState 与 useEffect 使用规范
2026-11-04 18:46:10
基于 UmiJS 与 Ant Design Pro 搭建企业级中后台系统
2026-11-03 16:42:02
