React.js不会在setState上重新渲染

时间:2017-08-22 14:54:19

标签: javascript reactjs meteor state setstate

我希望你可以在这里帮忙,因为我现在已经在这方面苦苦挣扎了一段时间,我试图改变悬停时显示的图片,我从一个从子组件调用的函数中获取新图片的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>
    )
}

}

3 个答案:

答案 0 :(得分:1)

你丢弃了BiggerImage的道具,而不是将它们传递给super

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

删除构造函数(它没有做任何事情),或者更改它以传递道具:

constructor(props) {
    super(props)
}

可以在React docs找到更多信息。

答案 1 :(得分:0)

将道具传递给超级

constructor(props) {
    super(props)

答案 2 :(得分:0)

嗨,谢谢你的回答!然而这不是问题,但我想通了,我从传递给我的悬停图像的图像网址的子组件绑定了这个,所以当在父组件中我设置状态时,它设置了相反,子组件的状态,因此没有效果! 现在所有人都修好了,谢谢!