如何防止渲染中出现重复的道具

Question

在我的reactjs应用程序中，滑块详细信息是通过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然后进行比较，这将帮助您在数组值相同时停止更新。