React.js setState不起作用

Question

我是React中的一个菜鸟,并尝试为用户输入数字的水相制作一个简单的应用程序,然后根据它应该显示水的状态的值,例如,如果他输入212它应该说气体和12它应该说实话,但由于某种原因它没有正确显示值,任何帮助非常感谢!!!

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            msg: "liquid",
            temp: 0
        };
        this.handlenum1Change = this.handlenum1Change.bind(this);
    }

    handlenum1Change(evt) {
        console.log(evt.target.value);
        this.setState({
            temp: Number(evt.target.value)
        });

        let temp = this.state.temp
        if (temp > 100) {
            this.setState({
                msg: "boiling"
            })
        } else if (temp < 32) {
            this.setState({
                msg: "frozen"
            })
        } else {
            this.setState({
                msg: "liquid"
            })
        }
    }

    render() {
        return (
            <div>
                <h1> {this.state.msg} </h1>
                <form className="form-inline">
                    <div className="form-group">
                        <label> Temp: </label>
                        <input type="number"  onChange={this.handlenum1Change} className="form-control" />
                    </div>
                </form>
            </div>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

setState是异步的,不会立即更新状态.它在更新之前收集多个状态更改.这意味着,这this.state不会立即保留您的新价值.

或者在这里引用React文档:

setState()并不总是立即更新组件.它可以批量推迟更新或推迟更新.这使得this.state 在调用setState()潜在陷阱后立即阅读.相反,使用 componentDidUpdate或setState回调(setState(updater, callback)),其中任何一个都保证在应用更新后触发.如果需要根据以前的状态设置状态,请阅读下面的updater参数.

相反,在设置新状态之前,反过来使用用户输入.这样你就可以同时集体设置温度和消息:

const temp = Number(evt.target.value);
let msg = '';
if (temp > 100) {
  msg = 'boiling';
} else if (temp < 32) {
  msg = 'frozen';
} else {
  msg = 'liquid';
}

this.setState({
  temp,
  msg,
});