云技术文章页正文上
本篇内容主要讲解“react改变数组页面没有刷新如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react改变数组页面没有刷新如何解决”吧! react改变数组页面没有刷新是因为数组的赋值是引用传递的，其解决办法：1、打开相应的文件；2、找到“data.push(obj)”；3、使用新数组“let data = […this.state.data];”即可。React 数组变化不引起视图更新
importReact,{Component}from'react';
import'./App.css';
importTodofrom'./components/todo/index'
import{Table,Button}from'element-react';
classAppextendsComponent{
constructor(props){
super(props);
this.state={
columns:[
{
label:"日期",
prop:"date",
width:180
},
{
label:"姓名",
prop:"name",
width:180
},
{
label:"地址",
prop:"address"
}
],
data:[{
date:'2016-05-02',
name:'王小虎',
address:'上海市普陀区金沙江路1518弄'
},{
date:'2016-05-04',
name:'王小虎',
address:'上海市普陀区金沙江路1517弄'
},{
date:'2016-05-01',
name:'王小虎',
address:'上海市普陀区金沙江路1519弄'
},{
date:'2016-05-03',
name:'王小虎',
address:'上海市普陀区金沙江路1516弄'
},{
date:'2016-05-02',
name:'王小虎',
address:'上海市普陀区金沙江路1518弄'
},{
date:'2016-05-04',
name:'王小虎',
address:'上海市普陀区金沙江路1517弄'
},{
date:'2016-05-01',
name:'王小虎',
address:'上海市普陀区金沙江路1519弄'
},{
date:'2016-05-03',
name:'王小虎',
address:'上海市普陀区金沙江路1516弄'
}]
}
}
render(){
return(
);
}
addData(){
letobj={
date:'2018-05-07',
name:'小明',
address:''
};
letdata=this.state.data;
data.push(obj);
this.setState({
data:data
});
console.log(this.state);
}
}
exportdefaultApp;
上面代码中 通过setState设置data的值发现视图并没有更新，原因是数组的赋值是引用传递的，data = this.state.data是执行data这个数组的内存，所以执行data.push(obj)实际上相当于执行了 this.state.data.push(obj),所以react的虚拟dom发现state里面的data没有变化，所以不更新视图,而这时可以使用一个新数组：
letdata=[...this.state.data];
代码改为:
importReact,{Component}from'react';
import'./App.css';
importTodofrom'./components/todo/index'
import{Table,Button}from'element-react';
classAppextendsComponent{
constructor(props){
super(props);
this.state={
columns:[
{
label:"日期",
prop:"date",
width:180
},
{
label:"姓名",
prop:"name",
width:180
},
{
label:"地址",
prop:"address"
}
],
data:[{
date:'2016-05-02',
name:'王小虎',
address:'上海市普陀区金沙江路1518弄'
},{
date:'2016-05-04',
name:'王小虎',
address:'上海市普陀区金沙江路1517弄'
},{
date:'2016-05-01',
name:'王小虎',
address:'上海市普陀区金沙江路1519弄'
},{
date:'2016-05-03',
name:'王小虎',
address:'上海市普陀区金沙江路1516弄'
},{
date:'2016-05-02',
name:'王小虎',
address:'上海市普陀区金沙江路1518弄'
},{
date:'2016-05-04',
name:'王小虎',
address:'上海市普陀区金沙江路1517弄'
},{
date:'2016-05-01',
name:'王小虎',
address:'上海市普陀区金沙江路1519弄'
},{
date:'2016-05-03',
name:'王小虎',
address:'上海市普陀区金沙江路1516弄'
}]
}
}
render(){
return(
);
}
addData(){
letobj={
date:'2018-05-07',
name:'小明',
address:''
};
letdat免费云主机、域名a=[...this.state.data];
data.push(obj);
this.setState({
data:data
});
console.log(this.state);
}
}
exportdefaultApp;
这样data比对以后会react会检测新旧的变化而更新dom。到此，相信大家对“react改变数组页面没有刷新如何解决”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
这篇“object.assign()如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“object.assign()如何使用”文章吧。 ob…
文章页内容下
主机管理平台有哪些？
企业网站主机，选云服务器还是虚拟主机？
域名注册申请，必须要实名吗？