React.js setState不工作[重复]

Question

我是React中的一个noob，正在尝试为水相制作一个简单的应用程序，用户输入一个数字，然后根据数值显示水的状态，例如，如果他输入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")
);

html prettyprint-override"><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不是立即更改状态的必要方法，而是您请求尽快对更改组件状态做出反应的请求（请参见此处）。

您应该考虑的另一个重要因素是，eventReact使用的不是标准HTML事件，而是由React自身创建的用于包装标准事件的SyntheticEvent，出于“性能原因”，此SyntheticEvent将尽快被丢弃。

现在，你的问题很容易通过改变

const temp = this.state.temp

到

const temp = Number(evt.target.value)

但是在使用React组件的状态时，您应该记住上面两个因素。

编辑：在使用setState的回调版本时，有关syntheticevents的考虑尤其重要，因为从该回调中访问值很可能不包含触发onChange事件的输入值，因此，您必须将其存储在回调范围外的变量中，例如：

handleInputChange = (event) => {
     const value = event.target.value

     this.setState(prevState => {
          return { myValue: prevState.value + value }
     })
}

Answer 2

setState是异步的。另外，如果根据当前状态（this.state.temp）设置state（setState（{msg：...}）），则必须使用setState的回调版本。

但是在这种情况下，您可以同时设置temp和msg，因为它们都是从状态之外的东西（来自输入的temp）工作的：

handlenum1Change(evt) {
    console.log(evt.target.value);
    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});
}

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

    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 3

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

或在此处引用React文档：

setState（）并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得调用setState（）后立即读取This.state成为一个潜在的陷阱。相反，使用componentdiddupdate或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,
});