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.pswp.cn/news/277825.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/277825.shtml
英文地址,請注明出處:http://en.pswp.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…