Невозможно сравнить реквизиты при отправке componentWillRecieveProps

У меня есть бесконечный цикл, в то время как он делает то, что я хочу, извлекает мои обновленные данные без обновления, они очень медленные, так как их обработка снова и снова.

Я прочитал несколько вещей и попытался проверить, обновились ли реквизиты, но не могу понять это правильно...

Мой бесконечный цикл...

componentWillReceiveProps(nextProps) {
    whenGapiReady(() => {
        const { Id } = this.props;
        this.props.fetchFileUploads(Id)
    });
}

попытался изменить его на:

componentWillReceiveProps(nextProps){
    if (nextProps.Id !== this.props.Id)
    dispatch(this.props.fetchPlayerFileUploads(Id))
}

безуспешно, сейчас он ничего не делает. Я пропустил гапи, так как мог бы добавить это обратно.

Любая помощь в том, что это должно быть, чтобы остановить цикл! Также видел, что следует использовать componentDidUpdate, поскольку componentWillReceiveProps обесценивается, но в данный момент я возьму что угодно.

РЕДАКТИРОВАТЬ

componentWillReceiveProps(nextProps) {
    whenGapiReady(() => {
        const { Id } = this.props;
        if (nextProps.Id === this.props.Id) {    
            this.props.fetchFileUploads(this.props.Id)
        }

    });
}

Вышеупомянутое по-прежнему зацикливается бесконечно...?

Вы неправильно написали имя метода во втором имени, это Receive, а не Recieve

Dexygen 17.02.2019 23:40
componentWillReceiveProps устарел, и вам следует избегать его использования... Подробнее здесь: reactjs.org/docs/react-component.html#updating
SakoBu 18.02.2019 01:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
31
2

Ответы 2

Вам нужно правильно написать Receive в рефакторинге кода:

componentWillReceiveProps(nextProps){
//              ^^
    if (nextProps.Id !== this.props.Id)
    dispatch(this.props.fetchPlayerFileUploads(Id))
}
if (nextProps.Id === this.props.Id) {    
            this.props.fetchFileUploads(this.props.Id)
        }

componentWillReceiveProps будет вызываться каждый раз, а nextProps.Id всегда будет равно this.props.Id и, следовательно, бесконечный цикл, вы можете вместо этого сохранить идентификатор для состояния и вместо этого улучшить сравнение

Другие вопросы по теме