本篇内容主要讲解“React改变数组页面没有刷新如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react改变数组页面没有刷新如何解决”吧!react改变数组页面没有刷新是因为数组的赋值是
本篇内容主要讲解“React改变数组页面没有刷新如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react改变数组页面没有刷新如何解决”吧!
react改变数组页面没有刷新是因为数组的赋值是引用传递的,其解决办法:1、打开相应的文件;2、找到“data.push(obj)”;3、使用新数组“let data = [...this.state.data];”即可。
React 数组变化不引起视图更新
import React, { Component } from 'react';import './App.CSS';import Todo from './components/todo/index'import { Table, Button } from 'element-react';class App extends Component { 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 ( <div> <Todo list={this.state.data}/> <Table style={{width: '100%'}} columns={this.state.columns} data={this.state.data} /> <Button type="primary" onClick={this.aDDData.bind(this)}>添加</Button> </div> ); } addData () { let obj = { date: '2018-05-07', name: '小明', address: '' }; let data = this.state.data; data.push(obj); this.setState({ data: data }); console.log(this.state); }}export default App;
上面代码中 通过setState设置data的值发现视图并没有更新,原因是数组的赋值是引用传递的,data = this.state.data是执行data这个数组的内存,所以执行data.push(obj)实际上相当于执行了 this.state.data.push(obj),所以react的虚拟dom发现state里面的data没有变化,所以不更新视图,而这时可以使用一个新数组:
let data = [...this.state.data];
代码改为:
import React, { Component } from 'react';import './App.css';import Todo from './components/todo/index'import { Table, Button } from 'element-react';class App extends Component { 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 ( <div> <Todo list={this.state.data}/> <Table style={{width: '100%'}} columns={this.state.columns} data={this.state.data} /> <Button type="primary" onClick={this.addData.bind(this)}>添加</Button> </div> ); } addData () { let obj = { date: '2018-05-07', name: '小明', address: '' }; let data = [...this.state.data]; data.push(obj); this.setState({ data: data }); console.log(this.state); }}export default App;
这样data比对以后会react会检测新旧的变化而更新dom。
到此,相信大家对“react改变数组页面没有刷新如何解决”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
--结束END--
本文标题: react改变数组页面没有刷新如何解决
本文链接: https://www.lsjlt.com/news/348638.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0