React State показать как NaN

Question

Я пытаюсь установить состояние из предыдущих процедур, используя теперь устаревший компонентWillReceiveProps, как показано ниже

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

Мое первое предположение состоит в том, что в одном раунде обновления вашего компонента погоды неправильная реквизит.

Я бы завернул setState в проверку, чтобы убедиться, что реквизит является действительным числом, прежде чем пытаться выполнить математику.:

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

Консолируйте значение и смотрите, что происходит за время, пока оно NaN ... Кроме этого, без дополнительного кода трудно помочь:)

Answer 2

вы можете окружить все if (props.weather && !isNaN(props.weather.temp)), поэтому состояние будет обновляться только после получения правильного значения

Answer 3

Вы можете отобразить элемент, только если он имеет значение:

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

Это не позволит отобразить NaN.

---

Возможно, вы знаете, Boolean(NaN) возвращает false,Таким образом, вышеприведенное выражение вернет false, если значение в настоящий момент NaN и не будет обрабатываться дальше.