Как предотвратить дублирование реквизита внутри рендера

Question

В моем приложении activjs сведения о ползунке отображаются из вызова API. Они идут от редуктора в качестве реквизита. Проблема в том, что я получаю реквизит несколько раз. В результате мой слайдер отображает дубликаты изображений и данных. Есть ли какое-нибудь решение?. Также я пробовал shouldComponentUpdate, а также

shouldComponentUpdate(nextProps, nextState){
        if (nextProps.slider !== this.props.slider) {
            return false;
          }
          return true;
    }

renderSlides(sliderData) {
   console.log("Slider",sliderData);
   return sliderData.data.map(data => {
      return (
         <div key={data.embed_code} className="sliderItem">
           <div>
            <img className="img-fluid" src={data.image_url} alt={'img'}
             <label className="label-free">{data.name}</lable> 
           </div>
         </div>
       );
   });

 }

  render() {
   const { slider } = this.props;
     return (
     <div className="cat-item">
       {this.renderSlides(slider)}
     </div>);
 }

мой журнал консоли, как показано ниже

Answer 1

shouldComponentUpdate(nextProps, nextState){
        if (JSON.stringify(nextProps.slider) !== JSON.stringify(this.props.slider)) {
            return false;
          }
          return true;
    }

nextProps.slider !== this.props.slider это всегда возвращает вас false, потому что ссылка получает изменение, так как каждый раз создает новый массив. так что вы можете использовать stringyfy затем сравнить, что поможет вам остановить обновление, когда значения массива совпадают.