我有这样的组件：
... 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数组中，我想要显示Icon。 但即使状态中的事件对象正确更新（我在控制台中记录），图标仍然不会显示。
我注意到的奇怪行为是，如果我回到导航中并回到此组件，则图标会正确显示。
首先，你不需要在构造函数中执行setState，因为它没有被渲染，因为它没有被渲染
其次，你试图在onGenreChange函数中改变状态。在事件对象中你不需要额外的冗余类型数组，只需另一个标记就可以了
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>
你正在渲染：
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>
}