我希望你可以在这里帮忙,因为我现在已经在这方面苦苦挣扎了一段时间,我试图改变悬停时显示的图片,我从一个从子组件调用的函数中获取新图片的url( passSingleImage),一旦我收到新的url我重置状态,我也是console.logging新状态,它确实在悬停时被更改,但组件没有重新渲染! 这是我改变国家的主要组成部分......
export default class ShowMore extends React.Component{
constructor(props){
super()
this.state = {
product: '',
photos:'',
currentImage: ''
}
}
componentDidMount(){
debugger
Tracker.autorun(()=>{
var product = Products.find({_id:this.props.location.query.id}).fetch()
var photos = Photos.find({id:this.props.location.query.id}).fetch()
if(photos.length > 0) {
this.setState({product,photos, currentImage:photos[0].url})
console.log("original state currentImage", this.state.currentImage)
}
})
}
passSingleImage(photo){
if(photo){
this.setState({currentImage:photo},( )=>{
console.log('set the state',this.state.currentImage)
this.forceUpdate()
this.render()
})
}
}
render(){
debugger
if(this.state.product.length > 0) {
return(
<div>
<TopBar/>
<div className ="container">
<div className="row">
<ul style = {{width: '30%'}} >
<li>name: {this.state.product[0].name}</li>
<li>price: {this.state.product[0].price}</li>
</ul>
<ImageSlider
photos = {this.state.photos}
history = {this.props.history}
passSingleImage = {this.passSingleImage}
/>
<BiggerImage
image = {this.state.currentImage}
/>
</div>
</div>
</div>
)
}else {
return <LoaderComp message ={'loading images'}/>
}
}
}
然后显示图像的组件(总是相同!)
import React from 'react'
import TopBar from '../TopBar'
export default class BiggerImage extends React.Component{
constructor(props){
super()
}
componentWillReceiveProps(nextProp){
debugger
}
componentWillUpdate(a,b){
debugger
}
componentDidUpdate(a,b){
debugger
}
render(){
let img = {
maxWidth: '100%'
}
let abs = {
position:'absolute',
display:'inline-block',
width:'70%',
border:'1px solid black',
marginLeft:'4%',
marginRight:'4%'
}
return(
<div style = {abs}>
<div>
<img style = {img} src = {this.props.image} alt="image"/>
</div>
</div>
)
}
}
答案 0 :(得分:1)
你丢弃了BiggerImage
的道具,而不是将它们传递给super
:
constructor(props) {
super() // sad trombone
}
删除构造函数(它没有做任何事情),或者更改它以传递道具:
constructor(props) {
super(props)
}
可以在React docs找到更多信息。
答案 1 :(得分:0)
将道具传递给超级
constructor(props) {
super(props)
答案 2 :(得分:0)
嗨,谢谢你的回答!然而这不是问题,但我想通了,我从传递给我的悬停图像的图像网址的子组件绑定了这个,所以当在父组件中我设置状态时,它设置了相反,子组件的状态,因此没有效果! 现在所有人都修好了,谢谢!