Question

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

  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() 我很困惑，在这种情况下应该怎么做？

Answer 1

当您使用一个对象调用 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 设置 = 来改变状态。该赋值的返回值是新值 (val) 所以这就是它有点工作的原因：你是本质上调用了 this.setState({ selectedRatingIndex: val })，但你正在改变状态在你不应该做的过程中。

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

1 个答案: