Почему моя функция getImageId отключается только при первом запуске моего кода?

Question

Изначально были проблемы с циклом изображения (он убивал наши вызовы API), и мы поняли, что нам нужно удалить componentDidUpdate.Теперь при проверке страницы с помощью инструментов React Dev я вижу все, кроме обновлений img src, включая тег alt.Если на страницу ничего не было выведено, то она будет правильно отображать информацию, но как только что-то появится, она изменит все, кроме самого изображения.

class Img extends Component {
constructor(props) {
    super(props)
    this.state = {
        src: ""
    }
}

// componentDidUpdate() {
//     this.getImageId();
// }
componentDidMount() {
    this.getImageId();
}

getImageId() {
    axios.get(`http://localhost:4000/api/images/${this.props.src}`)
        .then(response => {
            console.log(response.data) //this shows only on first request
            this.setState({
                src: response.data
            })
        })
        .catch(err => console.log(err))
}
render() {
    return ( <img src = {
            this.state.src
        }
        alt = {
            this.props.alt
        }
        style = {
            {
                height: "150px",
                width: "200px",
                borderRadius: "10px"
            }
        }
        />
    )
}

}

Answer 1

Как таковой, ваш компонент будет делать запрос API только один раз. И эта логика выполняется в componentDidMount(). Это событие lifecycle, которое выполняется сразу после первого рендеринга компонента и никогда больше.

componentDidMount() {
    this.getImageId();
}

Логика componentDidUpdate(), которую вы прокомментировали, создает бесконечный цикл. Сначала ваш начальный getImageId() вызов выполняется в componentDidMount(). Он делает запрос API, затем отвечает некоторыми данными, и вы обновляете состояние компонента этими данными.

В любое время, когда состояние или реквизит обновляются, вы запускаете componentDidUpdate(). И, как в настоящее время построено, ваш componentDidUpdate() вызывает getImageId(), что обновляет состояние, которое затем запускает componentDidUpdate(), которое затем вызывает getImageId(), что ... вы получаете картину.

Вы можете обойти это. Если вы хотите совершать повторяющиеся вызовы в API только тогда, когда новый src передается в качестве поддержки от вашего родителя. Сделайте это вместо:

componentDidUpdate(prevProps){
   if(this.props.src !== prevProps.src){
      this.getImageId()
   }
}

Так что теперь вы делаете новый запрос только при наличии обновленного src.