写代码过程中遇到的一些小问题,随手记录一下~
1.更新state中的对象数组
直接修改this.state.array[i].xxx是不生效的,需要把state中的对象深拷贝一份,然后通过this.setState()来更新。我们可以用lodash来优雅地完成这一步骤:
import _ from 'lodash';
change(index, value) {
let temp = _.cloneDeep(this.state.array);
temp[index].xxx = value;
this.setState({ data: temp });
}
还有一种方式是使用immutability-helper这个工具库,但是有人做过测试,性能比lodash慢56%,这里就不推荐了。
2.动态更改组件样式中的某一项
这也比较有用,比如一个列表中的每一项都使用同样的模版和样式,但是我希望背景颜色不同,怎么办?教你一招:
<View style={StyleSheet.flatten([styles.commonStyle, {backgroundColor: item.color}])}></View>
CSS是层叠样式表,所以后面的配置会覆盖前面的,因此只要用StyleSheet.flatten()展开样式,在最后面追加