Не перемонтировать компонент, а изменить значения

Question

У меня есть компонент, который рендерит некоторые значения с идентификатором изображения корзины s3. создали один дочерний компонент, который будет обращаться к серверу aws и получать URL-адрес изображения. установить загрузчик, пока не будет выполнен вызов API. после того, как URL будет получен от звонка, загрузчик остановится и будет отображено изображение.

Проблема : У меня есть некоторые операции над значениями, которые будут выполнены. как поддержание значений, увеличение-уменьшение.

при обновлении состояний компонент будет перемонтирован. и снова будет вызван и загружен API изображений.

shouldComponentUpdate не будет работать. потому что, если я буду использовать его, он не будет отображать изменения на экране.

установил загрузчик до загрузки изображения. но нельзя показывать загрузчик при каждом нажатии кнопки. ищу лучшее решение. застрял в вопросе из последних 12 часов. буду очень благодарен, если кто-нибудь поможет мне избавиться от этого.

Спасибо.

Answer 1

Я думаю, что проблема в методе componentWillReceiveProps в <LoadImage />

componentWillReceiveProps(nextProps){
        if (this.props !== nextProps) {
            this.setState({
                image:DefaultImage,
                loading:true
            })
            this._loadImages(nextProps)
        }else{
            this.setState({
                loading: false,
            })
        }
    }

Вы вызываете this._loadImages(nextProps), который можно вызывать снова и снова, когда реквизиты передаются из компонента-владельца.

Даже если вы сравниваете входящие реквизиты, this.props !== nextProps всегда будет истинным, поскольку они оба являются объектами.Вы можете просмотреть некоторые вопросы по этому .

Вам будет лучше проводить сравнения по конкретным интересующим вас реквизитам - если вы хотите именно этого.

Также следует отметить, что componentWillReceiveProps является устаревшим, вы должны изучить getDerivedStateFromProps. Просмотреть документы здесь .