react视图不更新如何解决

本篇内容主要讲解“react视图不更新如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react视图不更新如何解决”吧!

react视图不更新是因为数组的赋值是引用传递的，其解决办法：1、打开相应的react文件；2、通过使用“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视图不更新如何解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！