React State показывает как NaN
Я пытаюсь setState из предыдущих Props, используя теперь устаревший componentWillReceiveProps, как показано ниже
componentWillReceiveProps(props) {
this.setState({
temp: Math.round(((props.weather.temp-273.15)*1.8)+32)
})
console.info(this.state)
}
Проблема, с которой я сталкиваюсь, заключается в том, что когда я это делаю, когда приложение обновляется, состояние NaN в течение 1 секунды, прежде чем стать правильным числом.
Вместо этого я попытался использовать componentWillMount () {}, но не только это не лучший жизненный цикл для установки состояния, предыдущие свойства недоступны в это время
Как я могу предотвратить появление этого NaN в визуализированной DOM и показать только состояние?
РЕДАКТИРОВАТЬ
Вы все правы. Меня больше беспокоило, нужен ли обработчик для жизненного цикла или React для решения подобной проблемы. Я думаю, это правда, что React в основном состоит из простого старого javascript.
Ответы 4
Вы можете отобразить элемент, только если он имеет значение:
{ this.state.temp && <div>{this.state.temp}</div>}
Это не позволит рендерить NaN.
Вы можете знать, что Boolean(NaN) возвращает false. Таким образом, приведенное выше выражение вернет false, если значение в настоящее время равно NaN, и не будет обрабатываться дальше.
Мое первое предположение заключается в том, что в одном раунде вашего компонента обновление свойства погоды неверно.
Я бы обернул setState в чек, чтобы убедиться, что опора является допустимым числом, прежде чем пытаться выполнить математику:
if (parseInt(props.weather.temp)){
this.setState({
temp: Math.round(((props.weather.temp-273.15)*1.8)+32)
})
}
Выведите значение в консоль и посмотрите, что происходит, пока это NaN ... Кроме того, без дополнительного кода трудно помочь :)
Я должен отметить, что это означает, что он сохранит исходное значение, если последнее неверно. Мне не знать, хотите вы этого или нет: P
вы можете окружить все с помощью if (props.weather && !isNaN(props.weather.temp)), поэтому состояние будет обновляться только после того, как оно получит правильное значение
Я столкнулся с той же проблемой сегодня, и у меня есть опыт, противоположный ответу. По моему опыту:
{this.state.temp && <div>{this.state.temp}</div>}
Если this.state.temp не равен true, это предложение вернет this.state.temp.
К счастью, когда это null, undefined, false или '', он не будет отображаться в Интернете.
Однако, если это 0 или NaN, на экране будет отображаться 0 или NaN.
Перейдите по ссылке ниже, чтобы получить дополнительные объяснения и решения:
Спасибо, @Yoav. Однако меня больше всего беспокоит ... Это нормальное поведение? Разве нет метода lifeCycle, который позволил бы опоре сразу перейти в качестве значения, помимо componentWillMount?