React setStats数组不更新,百思不得其解。

楼楼今日遇到个坑爹的问题。 就是 this.setStats({}) 对 this.stats 不更新问题

问题是这样的

 constructor(props) {super(props);this.state = {imageList: []}WechatService.getMaterialOrealList("image").then((result) => {this.setState({imageList: result})});}async handleInputChangeUpload(event) {var target = event.target;var file = target.files[0];var formData = new FormData();formData.append('file', file);var result = await WechatService.updateMaterialImage(formData);var lists = this.state.imageList;lists.push(result);console.log(lists);//同步更新this.setState((prevState, props) => ({imageList: lists}))}
复制代码

数组的长度已经变成了11可是 render 并没有更新!!,这是为什么呢? 此方法已经是谷歌出来的东西,可是好像并没有成功

 this.setState((prevState, props) => ({imageList: lists}))
复制代码

但是楼主看了一下elementsUI 的代码后进行一次修改后,发现一下方案倒是成功了。百思不得其解,不知道那位小兄弟可以解答一下。

constructor(props) {super(props);this.state = {//这是把数组用一个对象包含起来data: {imageList: []}}}componentWillMount() {WechatService.getMaterialOrealList("image").then((result) => {this.setState({data: Object.assign({}, {imageList: result})})});}handleUpload() {this.refs.inputFile.click();}async handleInputChangeUpload(event) {var target = event.target;var file = target.files[0];var formData = new FormData();formData.append('file', file);var result = await WechatService.updateMaterialImage(formData);var lists = this.state.data.imageList;lists.push(result);this.setState((prevState, props) => ({//浅拷贝、对象属性的合并data: Object.assign({}, { imageList: lists })}))setTimeout(() => {console.log(this.state.data);});}
复制代码

这样使用对象进行修改的数组变量反而更新了。

这是为什么呢? 无法解答

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/277825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

隧道6in4 和隧道6to4(GNS3)

隧道6in4实验配置 拓扑图 Device Interface IP Address(IPv6) R1 F 0/0 10.1.81.1 F 0/1 2001:db8:cafe:81::10 R2 F 0/0 10.81.1.2 F 0/1 172.81.1.2 R3 F 0/0 172.81.1.3 F 0/1 2001:DB8:ACE:81::20 R4 F 0/0 2001:db8:cafe:81::4…

hadoop常用命令总结

2019独角兽企业重金招聘Python工程师标准>>> 一、前述 分享一篇hadoop的常用命令的总结,将常用的Hadoop命令总结如下。 二、具体 1、启动hadoop所有进程 start-all.sh等价于start-dfs.sh start-yarn.sh 但是一般不推荐使用start-all.sh(因为开源框架中内…

C面向对象编程

C语言面向对象编程 1. 定义一个SuperObject结构体, 里面包含最少的元素, 但是确实每一个对象都含有的, 这样可以实现多态2. 每一个对象都是基于类的, 我们知道类都是单例对象, 所以我们创建结构体, TypeObject(类似于Java中的class), 接着每一个Object结构体中 都包含着一个对应…

几道web题简单总结

拖了好长时间,总结一下这一段时间做的几道值得记录一下的题目,有的没做出来,但是学习到了新的东西 1.homebrew event loop ddctf的一道题目,学到了python eval函数的用法,首先分析题目: # -*- encoding: ut…

js进阶 9-5 js如何确认form的提交和重置按钮

js进阶 9-5 js如何确认form的提交和重置按钮 一、总结 一句话总结: 1、这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return。注意:一般的调用肯定是没有return的。onsubmit"…

.NET中RabbitMQ的使用

.NET中RabbitMQ的使用 概述 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法。RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统。他遵循Mozilla Public License开源协议。AMQP(高级消息队列协议) 是一个异步…

SQL Server死锁诊断--同一行数据在不同索引操作下引起的死锁

死锁概述 对于数据库中出现的死锁,通俗地解释就是:不同Session(会话)持有一部分资源,并且同时相互排他性地申请对方持有的资源,然后双方都得不到自己想要的资源,从而造成的一种僵持的现象。当然…

python下载安装搭建

python官网下载python运行环境(https://www.python.org/downloads/),建议下载稳定版本,不推荐使用最新版本 安装 然后我们打开CMD,在里面输入python,就可以直接进入进行编码了 如果输入python出现下面错误 …

35个Java 代码性能优化总结

前言代码优化,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗&#…

MySQL讲义

1 MySQL基础知识 瑞典MySQL AB公司开发,由SUN收购,而后SUN被甲骨文并购,目前属于Oracle公司。 MySQL是一种关联数据库管理系统 由于其体积小、速度快、总体拥有成本低、MySQL软件采用了双授权政策,分为社区版和企业版。 …

Teams Bot App Manifest 文件解析

这篇文章我们继续以 Hello World Bot 这个 sample 来讲一下 manifest template。 实际上在 Teams app 开发的时候,有 manifest 的概念,manifest 是用来说明这个 teams app 的一些基本信息和配置信息,比如 app 的名字,app有哪些能…

[Dart] Flutter开发中的几个常用函数

几个Flutter开发中的常用函数 /** 返回当前时间戳 */static int currentTimeMillis() {return new DateTime.now().millisecondsSinceEpoch;}/** 复制到剪粘板 */static copyToClipboard(final String text) {if (text null) return;Clipboard.setData(new ClipboardData(text…

Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html...

Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用。演示一个例子&#xf…

clojure with postgres

主要关注访问pg。不关心其他db 1 clojure.java.jdbc https://github.com/clojure/java.jdbchttp://clojure-doc.org/articles/ecosystem/java_jdbc/reusing_connections.html这个最广,需要配合不同DB[org.clojure/java.jdbc "0.7.9"] [org.postgresql/pos…

lua入门

https://en.blog.nic.cz/2015/08/12/embedding-luajit-in-30-minutes-or-so/

shell脚本传可选参数 getopts 和 getopt的方法

写了一个shell脚本,需要向shell脚本中传参数供脚本使用,达到的效果是传的参数可以是可选参数 下面是一个常规化的shell脚本: echo "执行的文件名为: $0";echo "第一个参数名为: $1";echo "第二个参数名为: $2"…

Teams Tab App 代码深入浅出 - 配置页面

上一篇文章我们使用Teams Toolkit 来创建、运行 tab app。这篇文章我们深入来分析看一下tab app 的代码。 先打开代码目录,可以看到在 src 目录下有入口文件 index.tsx,然后在 components 目录下有更多的一些 tsx 文件,tsx 是 typescript的一…

labelme标注的json文件数据转成coco数据集格式(可处理目标框和实例分割)

这里主要是搬运一下能找到的 labelme标注的json文件数据转成coco数据集格式(可处理目标框和实例分割)的代码,以供需要时参考和提供相关帮助。 1、官方labelme实现 如下是labelme官方网址,提供了源代码,以及相关使用方…

EpSON TM-82II驱动在POS系统上面安装问题处理

按照品牌名称,在网上下载的安装包为apstmt82.rar 下面讲解一下,如何的解决爱普生打印机在POS机器上面的安装问题,这个算是一个比较奇特的故障问题,不像其它的新北冰洋(SN3C)的U80_U80II,SeNor的…

打印图片的属性和实现另存图片功能以及使用numpy

上一篇我们已经学了如何读取图片的功能了以及和opencv的环境搭建了,今天接着来学习,哈哈哈,今天刚好五一,也没闲着,继续学习。 1、 首先我们来实现打印出图片的一些属性功能, 先来看一段代码: 1…