无法更新状态

Question

我想根据条件更新状态。

请参考代码并在逻辑或代码中指出问题。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      backImgIndex: 1
    };
    this.changeSlide = this.changeSlide.bind(this);
  }

  changeSlide() {
    if (this.state.backImgIndex === 3) ({
      this.setState = {
        backImgIndex: 1
      });
    } else {
      this.setState = ({
        backImgIndex: this.state.backImgIndex + 1
      });
    }
  }

render() {
    const imageURL = '/backImg/b' + this.state.backImgIndex + '.jpg';
    return (
      <Fragment>
         <BackgroundSlider backurl={imageURL} />
         <div className="slider">
           <div className="left-arrow" style={{}} onClick={this.changeSlide} />
         </div>
      </Fragment>
    );
  }
}

export default App;

有没有其他方法来更新相同的。

最终目标是在按下.left箭头时更新触发背景图像更新的状态。

div可以用于这样的事件吗？

Answer 1

您正在以错误的方式进行更新。 setState是一个应该调用的函数，以便更新state。事实上，你压倒这样的功能：

this.setState = {
  backImgIndex: 1
};

那么，你需要的是调用setState并传入你想要更新的状态的一部分：

this.setState({ backImgIndex: 1 });

这有效：

changeSlide() {
  if (this.state.backImgIndex === 3) {
    this.setState({
      backImgIndex: 1
    });
  } else {
    this.setState({
      backImgIndex: this.state.backImgIndex + 1
    });
  }
}

Final code

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      backImgIndex: 1
    };
    this.changeSlide = this.changeSlide.bind(this);
  }

  changeSlide() {
    if (this.state.backImgIndex === 3) {
      this.setState({
        backImgIndex: 1
      });
    } else {
      this.setState({
        backImgIndex: this.state.backImgIndex + 1
      });
    }
  }

render() {
    const imageURL = '/backImg/b' + this.state.backImgIndex + '.jpg';
    return (
      <Fragment>
        <BackgroundSlider backurl={imageURL} />
        <div className="slider">
          <div className="left-arrow" style={{}} onClick={this.changeSlide} />
        </div>
      </Fragment>
    );
  }
}

Answer 2

setState中的语法错误。

另外，我建议在设置之前准备新状态：

changeSlide() {
        let imgI=this.state.backImgIndex;
        imgI=(imgI===3)?1:imgI+1;
        this.setState({ backImgIndex: imgI});
      }

实际上，一个更好的选择（因为State Updates May Be Asynchronous）：

changeSlide() {
    this.setState((state,props)=>(state.backImgIndex===3?{ backImgIndex: 1}:{ backImgIndex: state.backImgIndex+1}));
}

Answer 3

首先，我建议您使用ES6语法以获得更清晰：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      backImgIndex: 1
    };
  }

  changeSlide = () => {
    if (this.state.backImgIndex === 3) {
      this.setState = ({
        backImgIndex: 1
      });
    } else {
      this.setState = ({
        backImgIndex: this.state.backImgIndex + 1
      });
    }
  }

render() {
    const imageURL = `/backImg/b'${this.state.backImgIndex}.jpg`;
    return (
      <Fragment>
         <BackgroundSlider backurl={imageURL} />
         <div className="slider">
           <div className="left-arrow" style={{}} onClick={this.changeSlide} />
         </div>
      </Fragment>
    );
  }
}

export default App;

我将您的函数更改为箭头函数，并使用了imageURL的模板字符串。我认为问题出在你的setState中。你能否在更新状态后记录this.state.backImgIndex的结果？

编辑：正如其他评论中指出的那样，你正在以错误的方式更新你的州。我在这个例子中更正了它，所以你可以有一个干净的例子