React Native — состояние не сохраняется в объекте

Я пробую React Native и теперь получаю прогноз погоды из openweather API. данные извлекаются после того, как пользователь вводит город и нажимает кнопку.

Проблема в том, что я пытаюсь сохранить ответ на свойство объектов состояния «прогноз», но он не сохраняется.

Что я делаю неправильно?

 import React, {Component} from 'react';
    import {StyleSheet, Text ,TextInput, View, Button} from 'react-native';

export default class App extends Component { 

    constructor(props){
      super(props);
      this.state = {
        text:"",
        forecast:null,
        hasData: false
      }
    }

    userTextChange = (input) => {
      this.setState({
        text:input
      })
    }

    getMovies = () => {
      var url = 'https://api.openweathermap.org/data/2.5/weather?q='+this.state.text+'&units=metric&appid=7d6b48897fecf4839e128d90c0fa1288';
      fetch(url)  
      .then((response) => response.json())
      .then((response) => {
          this.setState = ({
            forecast:response,
            hasData:true
          })
          console.info(response) <-- This is a json reponse with one object
      })
      .catch((error) => {
          console.info("Error: ",error);
      });
    }

  render() {
    return (
      <View style = {styles.container} >

          <TextInput 
            style = {{width:'80%',borderRadius:8,marginTop:70,height:60,backgroundColor:'#f1f1f1',textAlign:'center',borderWidth:1,borderColor:'#ccc'}}
            placeholder = ""
            onChangeText = {this.userTextChange}
          />

          <Button
            title = "Get forecats"
            style = {{backgroundColor:'#000',height:50,width:'50%',marginTop:30,marginBottom:30}}
            onPress = {()=>this.getMovies()}
          />

         <View style = {{width:'90%',height:'68%', backgroundColor:'rgba(0,0,0,0.5)',alignItems:'center',paddingTop:20}}>
          <Text style = {{color:'#000',fontSize:22}}>{this.state.forecast.name}</Text> <-- THIS IS NULL
        </View>

         </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems:'center'
  },
});

Вот ответ JSON от openweather API frpm.

прогноз не может быть нулевым, когда вы его инициализируете, потому что вы используете this.state.forecast.name

AlexZvl 24.03.2019 20:41
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
1
569
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Следующая строка:

this.setState = ({
  forecast:response,
  hasData:true
})

должно быть:

this.setState({
  forecast:response,
  hasData:true
})

Вам также следует рассмотреть возможность инициализации прогноз в состоянии пустым объектом.

Другие вопросы по теме