react改变数组页面没有刷新怎么办

学习笔记 03/12 React

react改变数组页面没有刷新是因为数组的赋值是引用传递的，其解决办法：1、打开相应的文件；2、找到“data.push(obj)”；3、使用新数组“let data = [...this.state.data];”即可。

react改变数组页面没有刷新怎么办

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react改变数组页面没有刷新怎么办？

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: &#39;100%&#39;}}
           columns={this.state.columns}
           data={this.state.data}
       />
       <Button type="primary" onClick={this.addData.bind(this)}>添加</Button>
     </div>
    );
  }
  addData () {
    let obj = {
      date: &#39;2018-05-07&#39;,
      name: &#39;小明&#39;,
      address: &#39;&#39;
    };
    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 &#39;react&#39;;
import &#39;./App.css&#39;;
import Todo from &#39;./components/todo/index&#39;
import { Table, Button } from &#39;element-react&#39;;
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: &#39;2016-05-02&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1518 弄&#39;
      }, {
        date: &#39;2016-05-04&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1517 弄&#39;
      }, {
        date: &#39;2016-05-01&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1519 弄&#39;
      }, {
        date: &#39;2016-05-03&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1516 弄&#39;
      },{
        date: &#39;2016-05-02&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1518 弄&#39;
      }, {
        date: &#39;2016-05-04&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1517 弄&#39;
      }, {
        date: &#39;2016-05-01&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1519 弄&#39;
      }, {
        date: &#39;2016-05-03&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1516 弄&#39;
      }]
    }
  }
  render() {
    return (
     <div>
       <Todo list={this.state.data}/>
       <Table
           style={{width: &#39;100%&#39;}}
           columns={this.state.columns}
           data={this.state.data}
       />
       <Button type="primary" onClick={this.addData.bind(this)}>添加</Button>
     </div>
    );
  }
  addData () {
    let obj = {
      date: &#39;2018-05-07&#39;,
      name: &#39;小明&#39;,
      address: &#39;&#39;
    };
    let data = [...this.state.data];
    data.push(obj);
    this.setState({
      data: data
    });
    console.log(this.state);
  }
}
export default App;

这样data比对以后会react会检测新旧的变化而更新dom

推荐学习：《》

以上就是react改变数组页面没有刷新怎么办的详细内容，更多请关注本站点其它相关文章！

本文地址：https://www.stayed.cn/item/26869

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案