我使用字典来存储每张卡片中帖子的点赞数。
constructor(props) {
super(props);
this.state = {
like_dict: {}
};
this.likeClicked = this.likeClicked.bind(this)
}
我在每张卡片上都有一个“喜欢”按钮,文字表示“喜欢”的数量。
<Button transparent onPress={() => {this.likeClicked(poid, 0)}}>
<Icon name="ios-heart-outline" style={{ color: 'black' }} />
</Button>
<Text>{this.state.like_dict[poid]}</Text>
likedClicked
函数如下所示。我设置了 like_dict
的状态,但上面的文本不会重新渲染。
likeClicked(poid, liked){
var like_dict_tmp = this.state.like_dict
if (liked){
like_dict_tmp[poid] -= 1
}else{
like_dict_tmp[poid] += 1
}
this.setState({
like_dict: like_dict_tmp
})
}
最佳答案
React 的关键原则之一是永远不要直接改变状态。
当您执行 var like_dict_tmp = this.state.like_dict
时,like_dict_tmp
正在引用状态中的同一对象,因此更改 like_dict_tmp
将会发生变化直接更新状态,因此后续的setState
不会更新组件。
您可以使用 var like_dict_tmp = { ...this.state.like_dict }
创建浅拷贝,或将整个函数替换为:
this.setState((prevState) => ({
like_dict: {
...prevState,
[poid]: (prevState[poid] || 0) + (liked ? 1 : -1),
},
}));
关于javascript - setState 后组件未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49962595/