时间戳

首页 > 解决方案 > SetState 不重新渲染和画廊混合

reactjs - SetState 不重新渲染和画廊混合

问题描述

我正在处理一个自定义反应项目，我有一个问题，当一个组件应该被重新渲染时，显示了一个错误的图像数组，我不确定真正的问题是什么，但我想我可能会错过某个地方的重新渲染，我会的尽量在下面解释，如果你需要，请寻求更多信息，也试着忍受我，最后有一个链接:)

注意：画廊组件是您选择画廊的地方，而 ContainerPhotography 是显示不起作用的图像阵列的地方

这是我在状态中使用的 JSON 对象

    fotografije: [
  {
    "naslov": "Sculptures",
    "id": "f00",
    "brSlika": "10 image Gallery",
    "naslovnaSlika": "http://lanapavkov.com/content/img1.png",
    "naslovKlasa": "sculptures_naslov",
    "slikeUGaleriji": ["http://lanapavkov.com/content/skulpture/skp0.jpg", "http://lanapavkov.com/content/skulpture/skp1.jpg",  "http://lanapavkov.com/content/skulpture/skp2.jpg", "http://lanapavkov.com/content/skulpture/skp3.jpg", "http://lanapavkov.com/content/skulpture/skp4.jpg", "http://lanapavkov.com/content/skulpture/skp5.jpg", "http://lanapavkov.com/content/skulpture/skp6.jpg", "http://lanapavkov.com/content/skulpture/skp7.jpg", "http://lanapavkov.com/content/skulpture/skp8.jpg", "http://lanapavkov.com/content/skulpture/skp9.jpg"],
    "slikaKlasa": "sculptures"
  }, {
    "naslov": "Captions",
    "id": "f01",
    "brSlika": "16 image Gallery",
    "naslovnaSlika": "http://lanapavkov.com/content/una_gallery.png",
    "naslovKlasa": "captions_naslov",
    "slikeUGaleriji": ["http://lanapavkov.com/content/captions/cpt1.jpg", "http://lanapavkov.com/content/captions/cpt2.jpg","http://lanapavkov.com/content/captions/cpt3.jpg", "http://lanapavkov.com/content/captions/cpt4.jpg", "http://lanapavkov.com/content/captions/cpt5.jpg", "http://lanapavkov.com/content/captions/cpt6.jpg", "http://lanapavkov.com/content/captions/cpt7.jpg", "http://lanapavkov.com/content/captions/cpt8.jpg", "http://lanapavkov.com/content/captions/cpt9.jpg", "http://lanapavkov.com/content/captions/cpt10.jpg", "http://lanapavkov.com/content/captions/cpt11.jpg", "http://lanapavkov.com/content/captions/cpt12.jpg", "http://lanapavkov.com/content/captions/cpt13.jpg", "http://lanapavkov.com/content/captions/cpt14.jpg", "http://lanapavkov.com/content/captions/cpt15.jpg", "http://lanapavkov.com/content/captions/cpt16.jpg",],
    "slikaKlasa": "captions"
  }, {
    "naslov": "Eva",
    "id": "f02",
    "brSlika": "9 image Gallery",
    "naslovnaSlika": "http://lanapavkov.com/content/Eva_prez.png",
    "naslovKlasa": "eva_naslov",
    "slikeUGaleriji": ["http://lanapavkov.com/content/eva/1.jpg", "http://lanapavkov.com/content/eva/2.jpg", "http://lanapavkov.com/content/eva/3.jpg", "http://lanapavkov.com/content/eva/4.jpg", "http://lanapavkov.com/content/eva/4(1).jpg", "http://lanapavkov.com/content/eva/5.jpg", "http://lanapavkov.com/content/eva/6.jpg", "http://lanapavkov.com/content/eva/7.jpg", "http://lanapavkov.com/content/eva/8.jpg", "http://lanapavkov.com/content/eva/10.jpg", "http://lanapavkov.com/content/eva/11.jpg", "http://lanapavkov.com/content/eva/12.jpg", "http://lanapavkov.com/content/eva/13.jpg", "http://lanapavkov.com/content/eva/14.jpg", "http://lanapavkov.com/content/eva/15.jpg", "http://lanapavkov.com/content/eva/16.jpg", "http://lanapavkov.com/content/eva/17.jpg", "http://lanapavkov.com/content/eva/18.jpg", "http://lanapavkov.com/content/eva/19.jpg", "http://lanapavkov.com/content/eva/20.jpg", "http://lanapavkov.com/content/eva/21.jpg", "http://lanapavkov.com/content/eva/22.jpg", "http://lanapavkov.com/content/eva/23.jpg", "http://lanapavkov.com/content/eva/24.jpg"],
    "slikaKlasa": "eva"
  }, {
    "naslov": "Exposures",
    "id": "f03",
    "brSlika": "19 image Gallery",
    "naslovnaSlika": "http://lanapavkov.com/content/street_gallery_1.png",
    "naslovKlasa": "exposures_naslov",
    "slikeUGaleriji": ["http://lanapavkov.com/content/exposures/exp1.JPG", "http://lanapavkov.com/content/exposures/exp2.JPG", "http://lanapavkov.com/content/exposures/exp3.JPG", "http://lanapavkov.com/content/exposures/exp4.JPG", "http://lanapavkov.com/content/exposures/exp5.JPG", "http://lanapavkov.com/content/exposures/exp6.JPG", "http://lanapavkov.com/content/exposures/exp7.JPG", "http://lanapavkov.com/content/exposures/exp8.JPG", "http://lanapavkov.com/content/exposures/exp9.JPG", "http://lanapavkov.com/content/exposures/exp10.JPG", "http://lanapavkov.com/content/exposures/exp11.JPG", "http://lanapavkov.com/content/exposures/exp12.JPG", "http://lanapavkov.com/content/exposures/exp13.JPG", "http://lanapavkov.com/content/exposures/exp14.JPG", "http://lanapavkov.com/content/exposures/exp15.JPG", "http://lanapavkov.com/content/exposures/exp16.JPG", "http://lanapavkov.com/content/exposures/exp17.JPG", "http://lanapavkov.com/content/exposures/exp18.JPG", "http://lanapavkov.com/content/exposures/exp19.JPG", "http://lanapavkov.com/content/exposures/exp20.JPG", "http://lanapavkov.com/content/exposures/exp21.JPG", "http://lanapavkov.com/content/exposures/exp22.JPG", "http://lanapavkov.com/content/exposures/exp23.JPG", "http://lanapavkov.com/content/exposures/exp24.JPG", "http://lanapavkov.com/content/exposures/exp25.JPG", "http://lanapavkov.com/content/exposures/exp26.JPG", "http://lanapavkov.com/content/exposures/exp27.JPG", "http://lanapavkov.com/content/exposures/exp28.JPG", "http://lanapavkov.com/content/exposures/exp29.JPG", "http://lanapavkov.com/content/exposures/exp30.JPG"],
    "slikaKlasa": "exposures"
  }
]

在我的 app.js 中，我遍历这个数组以在屏幕上获取四个图像，这些图像实际上是触发画廊组件的按钮

        <div className="photography_c">
      {this.state.fotografije.map((photography, index) => {
        return  <Gallery
                    naslov={photography.naslov}
                    naslovnaSlika={photography.naslovnaSlika}
                    naslovKlasa={photography.naslovKlasa}
                    brSlika={photography.brSlika}
                    key={photography.id}
                    slikaKlasa={photography.slikaKlasa}
                    openPhotography={() => this.injectPhotography(index)} />
                  })}
    </div>

实际的画廊组件看起来像这样

   const Gallery = (props) => {
  return (
      <div onClick={props.openPhotography} className="singleGallery">
        <div className={props.naslovKlasa}>
          <h3>{props.naslov}</h3>
          <p>{props.brSlika}</p>
          <img className="plus_icon" src="http://lanapavkov.com/content/more.png" alt="open" />
        </div>
        <img className={props.slikaKlasa} src={props.naslovnaSlika} alt="nova slika "/>
      </div>
  )
}

我使用 openPhotography 将一个被点击的对象导入到一个空状态，并使用它的信息来填写另一个组件，即实际选择的画廊。函数看起来像这样

  injectPhotography = (fotografijaIndex) => {
    let {brslikeuG} = this.state;
    brslikeuG = 1;
    this.setState({brslikeuG: brslikeuG});

    const {updownPhotography} = this.state;
    updownPhotography.push("position-top-photography");
    this.setState({updownPhotography: updownPhotography});
    const selectedPhotography = this.state.fotografije.find((fotografija, index) => index === fotografijaIndex)
    this.setState((prevState) => ({
       selectedPhotography
    }))
  }

*brslikeuG 是我在页面上打印的数字，以便用户知道有多少图像

带有 sldes 和图像的实际组件就是这个组件

  const ContainerPhotography = (props) => {
return (
      <div className={props.klasa.join(' ')}>
      <div className="arrow_holder">
        <p className="br_slike">{props.brSlike}/{props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.length}</p>
        <img onClick={props.klikLevo} src="http://lanapavkov.com/content/back_arrow.png" alt="right_arrow" />
        <img onClick={props.klikDesno} src="http://lanapavkov.com/content/back_arrow.png" alt="left_arrow" />
      </div>
      <div className="horizontal_container" style={{ left: props.left }}>
      {props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.map((slika, index)=> {
               return <ImageLoopPhoto Key={'Key-'+index} url={slika} />
       })}
      </div>
        <img onClick={props.zatvori} src="http://lanapavkov.com/content/close.png" alt="close" className="close-popup" />
      </div>
  )
}

它是从 app.js 调用的

<ContainerPhotography
  selectedPhotography={this.state.selectedPhotography}
  klasa={this.state.updownPhotography}
  zatvori={this.closePreviewPhotography}
  left={this.state.left}
  brSlike={this.state.brslikeuG}
  klikDesno={this.pomeranjeGalerijePhotoDesno}
  klikLevo={this.pomeranjeGalerijePhotoLevo}/>

最后一个循环打印图像的组件是这个

const ImageLoopPhoto = (props) => {
  return (
      <div className="horizontal_element">
        <img src={props.url} alt="alt"/>
      </div>
  )
}

当我关闭实际的幻灯片组件时，只是更改了 css 类，所以我不会打扰你。

问题：当您单击第一个图像，浏览画廊，关闭它并打开第二个画廊时，第一个画廊中的图像仍然存在，当您尝试单击箭头时，图像更改为第二个数组（有时它们不）。我不确定这是重新渲染问题还是只是对所有事情的不良做法。我刚开始反应，所以请耐心等待，欢迎所有建议

如果您转到顶部的摄影并单击周围，您也可以在 lanapavkov.com 上实时看到此问题。

标签： reactjs

解决方案

您能否将组件 ContainerPhotography 替换为以下代码。请注意，我将 props Key 更改为 key。小写 k。并使用 url 作为键。

    const ContainerPhotography = (props) => {
return (
      <div className={props.klasa.join(' ')}>
      <div className="arrow_holder">
        <p className="br_slike">{props.brSlike}/{props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.length}</p>
        <img onClick={props.klikLevo} src="http://lanapavkov.com/content/back_arrow.png" alt="right_arrow" />
        <img onClick={props.klikDesno} src="http://lanapavkov.com/content/back_arrow.png" alt="left_arrow" />
      </div>
      <div className="horizontal_container" style={{ left: props.left }}>
      {props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.map((slika, index)=> {
               return <ImageLoopPhoto key={slika} url={slika} />
       })}
      </div>
        <img onClick={props.zatvori} src="http://lanapavkov.com/content/close.png" alt="close" className="close-popup" />
      </div>
  )
}

如果这能解决您的问题，请告诉我。谢谢

推荐阅读