• 技术文章 >web前端 >前端问答

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

    藏色散人藏色散人2023-01-18 14:33:30原创62

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

    本教程操作环境: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: '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视频教程

    以上就是react改变数组页面没有刷新怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:数组 React
    上一篇:react 安装插件就报错怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react怎么实现显示隐藏div• react怎么给树增加节点• react native reload 没有变化怎么办• react 安装插件就报错怎么办
    1/1

    PHP中文网