我正在开发一个自定义的React项目,但是我遇到一个问题,即何时应该重新渲染组件时显示了错误的图像阵列,我不确定真正的问题是什么,但是我认为我可能会丢失某个地方的重新渲染,我将在下面尽我最大的努力进行解释,如果您需要的话,请寻求更多的信息,也请尝试与我联系,最后有一个链接:)
注意:图库是您选择图库的地方,而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是我在页面上打印出来的数字,以便用户知道有多少张图片
具有滑块和图像的实际组件是此组件
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上实时看到此问题。
答案 0 :(得分:0)
可以用以下代码替换组件ContainerPhotography吗? 请注意,我将道具“键”更改为“键”。小写字母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>
)
}
如果这能解决您的问题,请告诉我。 谢谢