Question

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

}

Answer 1

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

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

删除构造函数（它没有做任何事情），或者更改它以传递道具：

constructor(props) {
    super(props)
}

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

Answer 2

将道具传递给超级

constructor(props) {
    super(props)

Answer 3

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

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

3 个答案: