樓樓今日遇到個坑爹的問題。 就是 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);});}
復制代碼
這樣使用對象進行修改的數組變量反而更新了。
這是為什么呢? 無法解答