Задать вопрос
  • Почему в компоненте не обновляется стейт?

    @Stakkato Автор вопроса
    Спасибо за ответы, по вашим подсказкам все заработало!
    Я его, правда, изменил и в итоге код стал такой:
    export default class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
                weather: {},
                isReadyToRender: false
            }
        }
    
        askForWeather = new AskForWeather();
    
        openData = () => {
            this.askForWeather.getNeededData().then(weather => {
                this.setState({
                    weather: weather,
                    isReadyToRender: true // стейт обновился, флаг стал true
                });
            })
            
        }
    
        componentDidMount() {
            let timerId = setTimeout(() => {
               this.openData(); 
            }, 5000);
            this.openData();
        }
    
        render() {
            if (this.state.isReadyToRender) { //если стейт обновлен и флаг в нем изменен на true
                return(
                    <div className= "container">
                        <Header />
                        <Main temperature={this.state.weather.main.temp} />
                        <Additional />
                    </div>
                );
            } else {
                return null;
            }
            
        }
    
    }

    То есть, пока стейт не обновится, ничего рендерится не будет. Как только в стейт пришли данные, стейт отрисовался. Правильно сделал?
    И еще, получается, в методе render() вместо if надо бы использовать промис, который ожидает изменения флага isReadyToRender и только потом возвращает верстку? Или текущий вариант тоже норм(для новичка =))?
    Ответ написан
    Комментировать