Question

为什么在状态发生变化时调用mu render方法？我想在下一次按钮单击时显示下一个图像，在上一个按钮单击时显示上一个图像，但是当我更新状态时，不会调用我的render方法。这是a live demo。

我像这样更新了状态：

 next(){
    var current = this.state.currentSlide;
    var next = current + 1;
    if (next > this.props.stories.items.length - 1) {
      next = 0;
    }
    this.state.currentSlide = next;
    console.log(this.state.currentSlide ,"next---")

  }
  pre(){
    var current = this.state.currentSlide;
    var prev = current - 1;
    if (prev < 0) {
      prev = this.props.stories.items.length - 1;
    }
    this.state.currentSlide = prev; 
      console.log(this.state.currentSlide ,"pre---")
  }

这是我的render方法：

render() {
    return (
      <div>
        <div className="imageSlider">
          <ul>
            {this.renderStories()}
          </ul>
        </div>
        <button onClick={this.next}>next image</button>
        <button
          onClick={this.pre}>pre image</button>

      </div>
    );

Answer 1

永远不要在构造函数之外改变state对象的属性。诸如国家之类的对象的变异导致了一大堆问题，并且是所有邪恶的根源。使用setState设置状态：

this.setState({
  currentSlide: next
});

每Using State Correctly at the React docs：

不要直接修改状态

例如，这不会重新渲染组件：
// Wrong
this.state.comment = 'Hello';
相反，请使用setState()：
// Correct
this.setState({comment: 'Hello'});
您可以指定this.state的唯一位置是构造函数。

为什么我的组件没有重新发布状态变化？

1 个答案:

不要直接修改状态