react更改数组页面没有刷新如何解决
发布时间：2023-07-15 10:54:11 所属栏目：教程 来源：转载
导读： 本篇内容主要讲解“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。 （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
