React.js没有在setState上重新渲染

Question

希望您能在这里有所帮助，因为我已经为此进行了一段时间的努力，我试图在悬停时更改显示的图片，我从子组件（passSingleImage）调用的函数中获取新图片的url，收到新的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>
    )
}

}

Answer 1

您要扔掉BiggerImage的道具，而不是将它们传递给super ：

constructor(props) {
    super() // sad trombone
}

要么删除构造函数（无论如何它什么也没做），或者更改它以传递道具：

constructor(props) {
    super(props)
}

更多信息可以在React文档中找到。

Answer 2

将道具传递给超级

constructor(props) {
    super(props)

Answer 3

嗨，谢谢你的回答！ 但是，这不是问题，但我发现了这一点，我是从子组件中绑定了这个组件，该子组件向我传递了悬停图像的图像URL，因此当在父组件中设置状态时，它是在设置状态子组件的状态，因此无效！ 现在全部固定了，谢谢！