反应状态显示为 NaN答案

【问题标题】：React State show as NaN反应状态显示为 NaN
【发布时间】：2019-02-24 08:56:19
【问题描述】：

我现在正在尝试使用已弃用的 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 组成。

【问题讨论】：

谢谢@Yoav。不过，我主要担心的是……这是正常行为吗？除了 componentWillMount 之外，是否没有一种 lifeCycle 方法可以让 prop 立即作为值出现？

【解决方案1】：

只有当元素有值时，你才能渲染它：

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

这将不允许渲染NaN。

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

【讨论】：

【解决方案2】：

我的第一个假设是，在您的组件的一轮更新中，天气属性是不正确的。

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

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

解决这个值，看看在它是 NaN 期间发生了什么......除此之外，没有更多代码，很难提供帮助 :)

【讨论】：

【解决方案3】：

您可以用if (props.weather && !isNaN(props.weather.temp)) 包围所有内容，这样状态只会在收到正确的值后更新

【讨论】：

【解决方案4】：

我今天刚遇到同样的问题，我的答案正好相反。根据我的经验：

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

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

查看以下链接以获得更多解释和解决方案：

【讨论】：