Javascript 设置状态后渲染组件不更新
我有这样一个组件：Javascript 设置状态后渲染组件不更新,javascript,reactjs,react-native,state,render,Javascript,Reactjs,React Native,State,Render,我有这样一个组件： ... imports class ChooseGenres extends Component { constructor(props) { super(props); this.setState({ event: { ... , genres: [] }, genres: [{...}, {...}, {...}] }); } eventHasG
... 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);
。。。进口
类ChooseGenres扩展组件{
建造师（道具）{
超级（道具）；
这是我的国家({
事件：{…，类型：[]}，
体裁：[{…}，{…}，{…}]
});
}
EventHasGene（项目、类型\u id）{
返回item.genres.indexOf（genre_id）>-1？true:false；
}
onGenreChange（类型识别）{
让event=this.state.event；
if（this.eventhasgree（event，genre_id））{
事件类型拼接（indexOf，1）
}否则{
事件类型推送（类型id）；
}
这是我的国家({
事件：事件
});
}
render（）{
返回(
{item.name}
{this.eventhasgreen（this.state.event，item.id）&&
}
}>
}
ChooseGenres.propTypes={
isLoggedIn:PropTypes.bool.isRequired，
}
常量mapStateToProps=（状态）=>{
返回{
isLoggedIn:state.isLoggedIn
};
};
const mapDispatchToProps=（调度）=>({
启动：（）=>调度（StartupActions.startup（））
});
导出默认连接（mapStateToProps、mapDispatchToProps）（ChooseGenres）；
但即使状态中的事件对象已正确更新（我将其记录在控制台中），图标仍不会显示 我注意到的奇怪行为是，如果我返回导航并返回此组件，图标将正确显示。您正在渲染：
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>
}
render（）{
返回(
{item.name}
{this.eventhasgreen（this.state.event，item.id）&&
}
}>
}
setStateonGenreChangestate = {
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>
状态={
类型：[{id:1，名称：1}，{id:2，名称：2}，{id:3，名称：3}]
}
onGenreChange=（id）=>{
const-genres=this.state.genres.map（genre=>{
如果（genre.id==id）{
返回{…流派，活动：！流派.活动}
}
返回体裁
})
这是我的国家({
体裁
});
}
this.onGenreChange（item.id）}>
{item.name}
{item.active&&
}
}>