react改变数组页面没有刷新怎么办-前端问答-PHP中文网

首页

web前端

前端问答

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

藏色散人

Jan 18, 2023 pm 02:33 PM

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 &#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;

上面代码中通过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视频教程》

以上是react改变数组页面没有刷新怎么办的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

php 怎么求2个数组相同的元素Dec 23, 2022 am 10:04 AM

php求2个数组相同元素的方法：1、创建一个php示例文件；2、定义两个有相同元素的数组；3、使用“array_intersect($array1,$array2)”或“array_intersect_assoc()”方法获取两个数组相同元素即可。

c语言数组如何初始化Jan 04, 2023 pm 03:36 PM

C语言数组初始化的三种方式：1、在定义时直接赋值，语法“数据类型 arrayName[index] = {值};”；2、利用for循环初始化，语法“for (int i=0;i<3;i++) {arr[i] = i;}”；3、使用memset()函数初始化，语法“memset(arr, 0, sizeof(int) * 3)”。

用Python实现动态数组：从入门到精通Apr 21, 2023 pm 12:04 PM

Part1聊聊Python序列类型的本质在本博客中，我们来聊聊探讨Python的各种“序列”类，内置的三大常用数据结构——列表类（list）、元组类（tuple）和字符串类（str）的本质。不知道你发现没有，这些类都有一个很明显的共性，都可以用来保存多个数据元素，最主要的功能是：每个类都支持下标（索引）访问该序列的元素，比如使用语法Seq[i]。其实上面每个类都是使用数组这种简单的数据结构表示。但是熟悉Python的读者可能知道这3种数据结构又有一些不同：比如元组和字符串是不能修改的，列表可以