Javascript React.js setState不工作

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
味精：“液体”，
温度：0
};
this.handlenum1Change=this.handlenum1Change.bind（this）；
}
手柄1更换（evt）{
日志（evt.target.value）；
这是我的国家({
温度：编号（evt.目标值）
});
设temp=this.state.temp
如果（温度>100）{
这是我的国家({
味精：“沸腾”
})
}否则，如果（温度<32）{
这是我的国家({
味精：“冷冻”
})
}否则{
这是我的国家({
味精：“液体”
})
}
}
render（）{
返回(
{this.state.msg}
临时雇员：
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

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

或在此处引用React文档：

setState（）
并不总是立即更新组件。可能
批处理或将更新推迟到以后。这使得读取
成为这种状态
在调用
setState（）
之后，这可能是一个陷阱。相反，使用
componentdiddupdate
或
setState
回调（
setState（更新程序、，
回调）
），其中任何一个都保证在更新后启动
已应用。如果需要根据上一个设置设置状态
状态，请阅读下面的更新程序参数


相反，在设置新状态之前，用另一种方法进行操作，并使用用户输入。这样，您还可以同时集体设置温度和信息：

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

const temp=Number（evt.target.value）；
让msg=''；
如果（温度>100）{
味精=‘煮沸’；
}否则，如果（温度<32）{
味精=‘冷冻’；
}否则{
味精=‘液体’；
}
这是我的国家({
临时雇员
味精，
});
是异步的，不会立即更新状态。它在更新之前收集多个状态更改。
这意味着，
this.state
不会立即保存您的新值

或在此处引用React文档：

setState（）
并不总是立即更新组件。可能
批处理或将更新推迟到以后。这使得读取
成为这种状态
在调用
setState（）
之后，这可能是一个陷阱。相反，使用
componentdiddupdate
或
setState
回调（
setState（更新程序、，
回调）
），其中任何一个都保证在更新后启动
已应用。如果需要根据上一个设置设置状态
状态，请阅读下面的更新程序参数


相反，在设置新状态之前，用另一种方法进行操作，并使用用户输入。这样，您还可以同时集体设置温度和信息：

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

const temp=Number（evt.target.value）；
让msg=''；
如果（温度>100）{
味精=‘煮沸’；
}否则，如果（温度<32）{
味精=‘冷冻’；
}否则{
味精=‘液体’；
}
这是我的国家({
临时雇员
味精，
});
设置状态
不是立即更改状态的命令式方法，而是要求您尽快对更改组件状态作出反应的请求（请参阅）

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

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

const temp = this.state.temp

到

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

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

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

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

setState
不是一种立即更改状态的命令式方法，而是一种请求，要求您尽快做出反应以更改组件的状态（请参阅）

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

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

const temp = this.state.temp

到

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

编辑：在使用
setState
的回调版本时，关于
syntheticevent
s的考虑尤其重要，因为从该回调中访问值很可能不包含触发
onChange
事件的输入值，因此，您必须将其存储在回调范围外的变量中，例如：<
handlenum1Change(evt) {
        let temp = evt.target.value;
        if (temp > 100) {
            this.setState({
                msg: "boiling"
            })
        } else if (temp < 32) {
            this.setState({
                msg: "frozen"
            })
        } else {
            this.setState({
                msg: "liquid"
            })
        }
    }