React shouldComponentUpdate too much recursion

Question

Я создаю приборную панель с автоматическим обновлением каждые несколько секунд, используя React. Я получаю свойства от вызова Ajax и передаю их компонентам, которые до сих пор работают нормально.

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

Это мой компонент:

var ImageContainer = React.createClass({ 

    getInitialState: function(){ 
     return { src: this.props.initialImage}; 
    }, 

    shouldComponentUpdate: function(nextProps, nextState){ 
     this.setState({ src: this.props.initialImage }); 
     return true; 
    }, 

    render: function() { 
     return (
      <div className="col-md-8 col-sm-12 nopadding post-image vcenter" > 
       <img src={this.state.src} className="img-responsive center-cropped"/> 
      </div> 
     ); 

    } 
}); 

Это хорошо работает, но дает too much recursion error.

Прошел поиск и нашел this answer, чтобы сообщить об этом componentWillReceiveProps, но при его использовании изображение не обновляется при первом автоматическом обновлении, только на втором.

Вот тока после того, как я реализую componentWillReceiveProps:

• Ajax получает результат вызова, скажем, данные А состояние
• Вызов передается к двум компонентам, изображение, а текст
• Первоначальный вызов> > Данные изображения A, Текстовые данные A
• Обновление компонента для получения данных B >> Данные изображения A, текстовые данные B
• Обновление компонента для получения данных C >> Данные изображения B, текстовые данные C

... и так далее. Можете ли вы помочь мне понять, почему это происходит?

Примечание: мне нужно использовать состояние, потому что есть необходимость запустить проверку на componentDidMount, чтобы подтвердить изображение является действительным

Answer 1

У меня были аналогичные проблемы с componentWillReceiveProps в прошлом. Предполагается, что если он называется, он имеет новые опоры, и, похоже, это не всегда так.

См: https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html

Рекурсия, вероятно, будет связано с установкой в ​​состояние shouldComponentUpdate без возвращения ложным, чтобы остановить рендер. Может быть, стоит попробовать что-то вдоль линий:

shouldComponentUpdate: function(nextProps, nextState) { 
    this.setState({ src: nextProps.initialImage }); 
    return nextProps.initialImage !== this.props.initialImage; 
} 

Добавляя условие, которое сравнивает старый реквизит и состояние их замену, он должен прекратить рекурсию.

ПРИМЕЧАНИЕ: Я не был в состоянии проверить этот код, так что может быть выключен