本篇内容主要讲解“React视图不更新如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react视图不更新如何解决”吧!react视图不更新是因为数组的赋值是引用传递的,其解决办法:1、打
本篇内容主要讲解“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视图不更新如何解决”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
--结束END--
本文标题: react视图不更新如何解决
本文链接: https://www.lsjlt.com/news/347637.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0