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視圖不更新如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！