Компоненты мерцают при повторном рендеринге в реакции

Question

У меня есть список избранных на моей странице, и когда я нажму на удаление, я отправлю вызов API в своем редукционном действии, которое удалит это избранное из списка избранных.Примерно так:

constructor(props) {
    super(props);
    this.state = {
        favourite: null
    };

    this.getFavourite();

}

getFavourite() {
   // get api call
}

removeFav(id) {
    const { removeFav } = this.props;

    removeFav(id);
    this.setState({ favourite: null });
}

Однако, поскольку API не возвращает весь список снова, мне нужно вызвать другой метод для получения всего списка (теперь без того, который я только что удалил).

componentDidUpdate(prevState) {
    if (prevState.favourite !== this.state.favourite) {
        this.getFavourites();
    }
}

Однако из-за этого повторного рендеринга страница, кажется, слегка мерцает каждый раз, когда я нажимаю кнопку «Удалить».

Нужно ли вообще делать componentDidUpdate() или устанавливатьгосударство для нуля для любимого достаточно?Если я это сделаю, то я не столкнусь с мерцанием, но пользовательский интерфейс просто обновляется через состояние, а не фактические данные из хранилища (если только я не обновляю страницу, так как я вызываю getFavourites(), когда страница загружается.

Answer 1

Если вы используете redux, это рекомендуемый способ сделать это:

1. On componentDidMount: отправить действие, содержащее извлечение api, для вас это getFavorite, затем сохранитьДанные API в хранилище резервов.
2. Используйте mapStateToProps, чтобы получить весь список из хранилища резервов.
3. Примените список, полученный на шаге 2, к пользовательскому интерфейсу.
4. Чтобы удалить,отправьте действие для вызова remove api, обновите список в онлайн-хранилище.Остальное должно быть обработано при помощи реакции и избыточности.