Как использовать последние реквизиты в render () после componentDidUpdate ()?

Question

Когда мой компонент монтируется, я вызываю API, чтобы получить список людей через axios в магазине приставок.

componentDidMount() {
  this.props.getPeople();
}

Как правило, после успешного вызова API я обновлю состояние peopleList в хранилище с избыточностью с последними данными.

Теперь я сопоставляю это peopleList (через mapStatetoProps), чтобы сгенерировать список людей в render() моего компонента. Все хорошо до этого момента.

Однако на каждой карточке персонажа есть кнопка «Мне нравится», которая, в свою очередь, выполняет запрос POST, чтобы изменить свойство isLiked объекта people на «true» (а также присваивает свойству 'isLiked' объекта «другие люди» значение false ( за один раз может понравиться только один)).

Теперь, когда я нажимаю кнопку «Мне нравится», это только вызывает изменение в бэкэнде. Я должен обновить страницу, чтобы увидеть обновленный пользовательский интерфейс.

Я новичок в React и вижу, что когда я делаю componentDidUpdate(), я имею доступ к новым данным после нажатия кнопки «Мне нравится», например:

componentDidUpdate(prevProps) {

    if(this.props.people !== prevProps.people) {
        console.log("PREV");
        console.log(prevProps.people);
        console.log("LATEST");
        console.log(this.props.people);
    }

}

Моя проблема в том, как заставить мой метод рендеринга использовать последние реквизиты вместо того, который он рендерил во время componentDidMount() при клике?

Answer 1

Вам не нужно обновлять его вручную, просто убедитесь, что действие getPeople обновляет peopleList в вашем состоянии Redux.Если это так, то компонент React автоматически повторно отображает DOM после componentDidUpdate.