时间戳

首页 > 解决方案 > 为什么 ReactJS 更新状态没有按预期工作？

reactjs - 为什么 ReactJS 更新状态没有按预期工作？

问题描述

我知道以前有人问过这个问题。但是，如果我遵循公认的答案，它对我不起作用。这是我的代码：-

  export class SurveyForm extends Component {
constructor(props) {
  super(props);
  this.state = {
    isSelected: false,
    selectedVal: 0,
    selectedRatingIndex: -1,
  };
  this.handleSubmit = this.handleSubmit.bind(this);
}

onClick={() => {
      // this is the recommended way of setting state. This doesn't work. 
      this.setState((prevState) => ({
        selectedRatingIndex: (prevState.selectedRatingIndex = val),
      }));

      this.setState((prevState) => ({
        isSelected: (prevState.isSelected = !this.state.isSelected),
      }));
// other code removed.  
}

但如果我这样做： -

     this.setState({
        selectedRatingIndex: (this.state.selectedRatingIndex = val),
      });
      this.setState({
        isSelected: (this.state.isSelected = !this.state.isSelected),
      });

它有效，它显示了我很困惑的警告Do not mutate state directly. Use setState()，在这种情况下应该怎么做？

标签： reactjsstate

解决方案

当您setState使用对象调用时，该对象应该只包含新值。

this.setState({
    selectedRatingIndex: val,
});
this.setState({
    isSelected: !this.state.isSelected, // it would be better to use a prevState callback instead of this.state
});

当您使用prevState回调时，您会返回一个从prevState.

this.setState((prevState) => ({
    selectedRatingIndex: val, // there is no point to a prevState callback here because prevState is unused
}));
this.setState(prevState => ({
    isSelected: !prevState.isSelected,
}));

当你做这样的事情时：

this.setState({
    selectedRatingIndex: (this.state.selectedRatingIndex = val),
});

this.state.selectedRatingIndex = val您正在通过设置=which 是赋值运算符来改变状态。该赋值的返回值是新值 ( val)，这就是它起作用的原因：您本质上是在调用this.setState({ selectedRatingIndex: val })，但是您正在改变您不应该做的过程中的状态。

推荐阅读