javascript - 设置状态后渲染组件不更新
问题描述
我有一个这样的组件:
... imports
class ChooseGenres extends Component {
constructor(props) {
super(props);
this.setState({
event: { ... , genres: [] },
genres: [{...}, {...}, {...}]
});
}
eventHasGenre(item, genre_id) {
return item.genres.indexOf(genre_id) > -1 ? true : false;
}
onGenreChange(genre_id) {
let event = this.state.event;
if (this.eventHasGenre(event, genre_id)) {
event.genres.splice(indexOf, 1)
} else {
event.genres.push(genre_id);
}
this.setState({
event: event
});
}
render() {
return (
<Container>
<Content>
<List dataArray={this.state.genres}
renderRow={(item) =>
<ListItem onPress={this.onGenreChange.bind(this, item.id)}>
<Body>
<Text>{item.name}</Text>
</Body>
{this.eventHasGenre(this.state.event, item.id) &&
<Right>
<Icon active name="arrow-forward" />
</Right>
}
</ListItem>
}>
</List>
</Content>
</Container>
}
ChooseGenres.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
}
const mapStateToProps = (state) => {
return {
isLoggedIn: state.isLoggedIn
};
};
const mapDispatchToProps = (dispatch) => ({
startup: () => dispatch(StartupActions.startup())
});
export default connect(mapStateToProps, mapDispatchToProps)(ChooseGenres);
当我单击 ListItem 时,我将流派添加到 event.genres 数组中,并且我希望显示图标。
但是即使状态中的事件对象被正确更新(我在控制台中记录它),图标仍然没有显示。
我注意到的奇怪行为是,如果我返回导航并返回此组件,则图标会正确显示。
解决方案
首先你不需要setState
在构造函数中做,因为它没有用,因为组件没有被渲染
其次,你试图改变onGenreChange
函数中的状态。您不需要在events 对象内有额外的冗余流派数组,只需另一个标签即可
state = {
genres: [{id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3}]
}
onGenreChange = (id) => {
const genres = this.state.genres.map(genre => {
if (genre.id === id) {
return {...genre, active: !genre.active}
}
return genre
})
this.setState({
genres
});
}
<List dataArray={this.state.genres}
renderRow={(item) =>
<ListItem onPress={() => this.onGenreChange(item.id)}>
<Body>
<Text>{item.name}</Text>
</Body>
{item.active &&
<Right>
<Icon active name="arrow-forward" size={20} color={'red'}/>
</Right>
}
</ListItem>
}>
</List>
推荐阅读
- r - 从 R 更新 Excel 工作表有哪些不同的方法
- python - 将字体转换为所有 Web 字体类型
- angular - 如何在刷新时在身份验证保护中获取用户和购物车数据?
- laravel - Axios 删除一个请求的默认标头
- android - 如何在 Kotlin 的 RecyclerView 上实现 longClickListen
- elasticsearch - ElasticSearch 在存储日志时抛出 503 错误
- angular - 将 POST 请求从 Object 解析为 JSON
- c++ - 我应该在哪里包括
- kubernetes - Kubernetes 请求不平衡
- python - python - 为什么在python OOP中将相同的对象附加到不同的列表时会得到不同的对象ID?