I hope you can help here as I have been struggling on this for a while now, I am trying to change the displayed picture on hover, I am getting the url of the new picture from a function called from the child component (passSingleImage), once I receive the new url i reset the state, i am also console.logging the new state and it has indeed being changed on hover, however the component is not re-rendering! this is my main component where the state has been changed...
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'}/>
}
}
}
and then the component that is displaying the image (always the same!)
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>
)
}
}
You're throwing away BiggerImage
's props instead of passing them to super
:
constructor(props) {
super() // sad trombone
}
Either remove the constructor (it's not doing anything anyway), or change it to pass the props along:
constructor(props) {
super(props)
}
More info can be found in the React docs .
pass props to super
constructor(props) {
super(props)
Hi and thanks for the answer! however that wasn't the issue, but I figured it out, I was binding this from the child component that was passing me the image url of the hover image, so when in the parent component I was setting the state, it was setting the state of the child component instead, hence having no effect! all fixed now though thanks!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.