设置状态后渲染组件不更新答案

【问题标题】：Render component not update after setstate设置状态后渲染组件不更新
【发布时间】：2019-02-18 16:44:46
【问题描述】：

我有一个这样的组件：

... 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 数组中，并且我希望显示图标。
但是即使状态中的事件对象被正确更新（我在控制台中记录它），图标仍然没有显示。

我注意到的奇怪行为是，如果我返回导航并返回此组件，图标会正确显示。

【问题讨论】：

渲染的返回是否需要右括号？

标签： javascript reactjs react-native state render

【解决方案1】：

首先你不需要在构造函数中做setState，因为它没有用，因为组件还没有被渲染

其次，您正试图改变 onGenreChange 函数中的状态。 events 对象 内不需要额外的冗余 genres 数组，只需另一个标签即可

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>

【讨论】：

正如我对@Sterling Beason 帖子的评论，这不是我所需要的，但你也让我明白我做错了什么。谢谢。
如果你直接改变状态对象，那么它不会重新渲染受该状态影响的dom树部分

【解决方案2】：

你正在渲染：

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>
}

【讨论】：

你说得对。即使这不是我需要的，我明白了，你让我理解。我认为更改状态会导致所有组件重新渲染。