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

【问题标题】：React.js not re-rendering on setStateReact.js 没有在 setState 上重新渲染
【发布时间】：2018-01-30 22:29:20
【问题描述】：

我希望你能在这里提供帮助，因为我已经为此苦苦挣扎了一段时间，我正在尝试更改悬停时显示的图片，我正在从子组件调用的函数中获取新图片的 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>
    )
}

}

【问题讨论】：

我还应该补充一点，子组件中的生命周期的调试器都没有被触发

标签： javascript reactjs meteor state setstate

【解决方案1】：

您正在丢弃BiggerImage 的道具，而不是将它们传递给super：

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

要么删除构造函数（反正它什么也没做），要么改变它以传递道具：

constructor(props) {
    super(props)
}

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

【讨论】：

【解决方案2】：

将道具传递给超级

constructor(props) {
    super(props)

【讨论】：

如果您检查了您的工作以进行格式化并显示正确的代码而不是重新发布 OP 的非工作代码，我会投赞成票。

【解决方案3】：

您好，感谢您的回答！但这不是问题，但我想通了，我是从向我传递悬停图像的图像 url 的子组件绑定它的，所以当我在父组件中设置状态时，它正在设置子组件的状态，因此没有效果！现在一切都修好了，谢谢！

【讨论】：