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;

还有其他更新方式吗？

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

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
    });
  }
}

最终密码

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

++ +中的语法错误。

此外，我建议在设置新状态之前先准备好它：

++++.....+++ 
++++ 
+++ 
++ 
+

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

setState

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的结果吗？

编辑：如其他评论所指出，您正在错误地更新状态。我在此示例中进行了更正，因此您可以有一个干净的示例

无法在反应中更新状态

3 个答案:

最终密码