Не перемонтируйте компонент, а измените значения
У меня есть компонент, который отображает некоторые значения с идентификатором изображения ведра s3. создали один дочерний компонент, который будет обращаться к серверу aws и получать URL-адрес изображения. установили загрузчик до тех пор, пока не будет выполнен вызов API. после того, как URL-адрес будет получен из вызова, загрузчик остановится и изображение будет визуализировано.
Проблема: У меня есть некоторая операция со значениями, которую нужно выполнить. как поддержание значений, увеличение-уменьшение.
при обновлении состояний компонент будет перемонтирован. и снова будет вызван и загружен API изображений.
shouldComponentUpdate работать не будет. потому что, если я воспользуюсь им, он не будет отображать изменения на экране.
установили загрузчик до загрузки изображения. но показывать загрузчик при каждом нажатии кнопки недопустимо. ищу лучшее решение. застрял на проблеме за последние 12 часов. буду очень благодарен, если кто-нибудь поможет мне избавиться от этого.
Спасибо.
@CameronDowner обновили вопрос. пожалуйста, проверь это.
Не могли бы вы также включить <LoadImage />? Я думаю, что в этом проблема.
нет никаких проблем с загрузкой изображения. там все нормально работает. я хочу здесь, я не хочу, чтобы изображения были перемонтированы. <LoadImage /> Компонент просто получает отсюда идентификаторы и выполняет вызовы корзины s3 для получения URL-адресов. и поместите этот URL в тег img.
@CameronDowner, все еще обновил мой вопрос. вы можете увидеть код компонента loadImage там
Ответы 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. Посмотреть документы здесь.
это была точная причина здесь. сравнивал объекты. застрял на глупой ошибке. спасибо, спаситель.
Без проблем. Также смотрите мое добавление об использовании getDerivedStateFromProps вместо componentWillReceiveProps :)
yepp. глядя в это.
Не могли бы вы включить код вашего компонента? Помогло бы ответить на вопрос.