楼楼今日遇到个坑爹的问题。 就是 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);});}
复制代码
这样使用对象进行修改的数组变量反而更新了。
这是为什么呢? 无法解答