我有一个像这样的组件:
... 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数组中,并且希望显示图标。
但是,即使状态正确的事件对象被正确更新(我将其记录在控制台中),该图标仍不会显示。
我注意到的奇怪行为是,如果我返回导航并回到该组件,图标将正确显示。
答案 0 :(得分:2)
首先,您无需在构造函数中执行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>
答案 1 :(得分:1)
您正在渲染:
this.state.genres
但设置状态为:
this.state.event.genres
尝试将您的渲染功能更新为此:
render() {
return (
<Container>
<Content>
<List dataArray={this.state.event.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>
}