版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
今天遇到的问题是:组件内对数组元素进行修改后数据有变化但是页面没重新渲染
话说这是因为组件没能够识别数组的变化,所以页面没有重新渲染
所以只要让组件感知到你发生了改变,就可以达到刷新的效果
提供两个很low的方案(但很有效▼o・ェ・o▼):
1.删除后重新添加(适合在行上做删除)
method(index){
let tempList = this.state.attachList;//拿到原数组的值
tempList.splice(index,1) //新对象保存对数组的修改
this.setState((prevState) =>{
delete prevState.attachList; //将state的这个变量删掉
return prevState;
})
this.setState({ //将对数组做出修改的内容重新保存state
attachList:tempList
})
}
2.转译一下再转回来(适合修改行数据)
changeListValue(index, value, name) { //索引,要修改的值,修改对象中哪个字段
let { iList } = this.state;
iList[index][name] = value; //修改原数组中对象属性
this.setState({ iList: JSON.parse(JSON.stringify(iList)) });//先转json串再转回对象,把值设置给state
}
我相信解决方案一定不少,并且我的不一定最优,欢迎大家给我好的建议,找到好的解决方案会过来更新的 ✧⁺⸜(●˙▾˙●)⸝⁺✧