反应状态显示为NaN

Question

我现在尝试使用如下所示已弃用的componentWillReceiveProps从先前的Props中设置状态

componentWillReceiveProps(props) {
  this.setState({
    temp: Math.round(((props.weather.temp-273.15)*1.8)+32)
  })
console.log(this.state)
}

我面临的问题是，当我执行此操作时，当应用程序更新时，状态变为 NaN 1秒钟，然后才变为正确的数字。

我尝试改用componentWillMount（）{}，但不仅不是用于设置状态的良好生命周期，而且先前的道具在此期间不可用

如何防止此NaN出现在渲染的DOM中而仅显示状态？

编辑

你们都是正确的。我更关心是否应该使用生命周期或特定于React的处理程序来解决此类问题。我想这是真的，React主要由普通的javascript组成。

Answer 1

仅当元素具有值时才可以渲染：

{ this.state.temp && <div>{this.state.temp}</div>}

这将不允许呈现NaN。

---

您可能知道Boolean(NaN)返回false。因此，如果当前值为NaN，则上面的表达式将返回false，并且不会进一步处理。

Answer 2

我的第一个假设是，在一轮组件中更新气象道具是不正确的。

在尝试进行数学运算之前，我将setState包装在检查中以确保prop是有效数字：

if(parseInt(props.weather.temp)){
    this.setState({
        temp: Math.round(((props.weather.temp-273.15)*1.8)+32)
    })
}

检查值并查看在NaN期间发生了什么...除了没有更多代码之外，很难提供帮助：）

Answer 3

您可以用if (props.weather && !isNaN(props.weather.temp))括起所有内容，因此状态只有在收到适当的值后才会更新

Answer 4

我今天遇到了同样的问题，而我的答案却与此相反。 根据我的经验：

{this.state.temp && <div>{this.state.temp}</div>}

如果this.state.temp不等于true，则此句子将返回this.state.temp。 幸运的是，当它是null，undefined，false或''时，将不会在Web上呈现任何内容。 但是，当它是0或NaN时，0或NaN将在屏幕上呈现。

检查下面的链接以获取更多说明和解决方案：

How to make conditionally rendering safer