Question

控制台只是不断记录BOOM VOOM？是有原因还是只是不认识字符串值？我是JS和React的新手。

constructor() {
  super()
  this.state = {
    message: "CLAY"
  }
}

changeMessage = () => {
  let mm = this.state.message
  console.log(mm)

  if (mm = "CLAY"){
    this.setState({
      message: "BOOM VOOM"
    })
  } else {
    this.setState({
      message: "CLAY"
    })
  }
}

Answer 1

当您写mm = "CLAY"时，您将值"CLAY"分配给了变量mm，因此，这总是真实的。

使用===进行严格比较，如下所示：

if (mm === "CLAY")

Answer 2

不需要re-assign和if-else条件

将先前的状态与&&一起使用会很好。

changeMessage = () => {
  this.setState(prev => prev.message === "CLAY" && { message: "BOOM VOOM" });
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "CLAY"
    };
  }
  handler = () => {
    this.setState(
      prev => prev.message === "CLAY" && { message: "BOOM VOOM" }
    );
  };

  render() {
    console.log(this.state.message);
    return <button onClick={this.handler}>{this.state.message}</button>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

React js，状态不会用我的if和else语句更新

2 个答案: