setState更改状态但不重新呈现

Question

我猜这可能与从父级打开有关，但我有其他组件，它们内部的状态发生变化，所以我有点困惑，为什么这个组件不尊重它的新状态。

谢谢

class DisplayLightbox extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showLightbox: false, 
      lightboxValue: null,
      activeImage: 'path/to/initial/image'
    };
    // I saw others recommend binding, not sure I'm using this right
    this.displayImage = this.displayImage.bind(this);
  }

// as I understand it, this should be unnecessary, as it should be true by default
  shouldComponentUpdate(nextProps) {
    return true
  }


  displayImage(newImage){

    if(newImage){
      this.state = {
      activeImage: newImage, 
      };
    }
    console.log(this.state.activeImage) // when I click the onClick below, I see the new change in my console to the new image path, so the state is changing

    return this.state.activeImage
  }


  render() {

    var lbActive = (this.props.showLightbox === true) ? "lb-active" : "" 

    return <div className={"lightbox " + lbActive }>
      <div className={"lightbox-content " + this.state.activeImage} >
      <img src={this.state.activeImage} onClick={() => this.displayImage('path/to/NEW/image')}
      />
      </div>
    </div>;
  }
}

Answer 1

为了更新状态，您需要将它作为一个函数调用，而不是直接设置它的属性。

而不是：

this.state = {
  activeImage: newImage
}

利用：

this.setState({
  activeImage: newImage
})