Реагирует API только выборки, если данные не используются

Question

У меня есть два элемента состояния в избыточном хранилище, оба из которых извлекают данные из API.

componentDidMount() {
        this.props.postMDBConfig(`https://api.themoviedb.org/3/configuration?api_key=${this.props.apiKey}`);
        this.props.postMoviePopular(`https://api.themoviedb.org/3/movie/popular?api_key=${this.props.apiKey}&language=en-US&page=1&region=US`)
    }

Но как только я передаю (или даже использую в текущем компоненте) информацию потомку и использую данные, она не получает.

render() {
        return (
            <ItemCarousel MDBConfig={this.props.config} items={this.props.moviesPopular}/>
        );
    }


class ItemCarousel extends React.Component {
    render() {
        const slider = (
            <AwesomeSlider cssModule={AwesomeSliderStyles}>
              <div data-src={`${this.props.config.images.secure_base_url}original${this.props.items[0].poster_path}`}> </div>
            </AwesomeSlider>
          );

        return (
            <div>{slider}</div>
        );
    }
}

Вот чтовыборка API выглядит, когда я использую против не использовать данные:

https://ibb.co/G00jzHW (с данными, не использующими их) https://ibb.co/xzkF89R (нет данных при использовании переменных состояния)

Я подозреваю, что это как-то связано с порядком жизненного цикла рендеринга, но я уже пробовал componentWillMount и он по-прежнему не работает по сравнению с componentDidMount.

Answer 1

Я думаю, что вы можете иметь одну переменную состояния, такую ​​как загрузка изначально true. Как только ваши вызовы API будут разрешены, вы можете обновить переменную состояния как false.

Теперь вы можете добавить эту проверку загрузки в свой компонент. Это поможет вам визуализировать компонент с использованием данных API.

render() {
    const itemCarousel = (this.state.loading) ? '' : <ItemCarousel MDBConfig= 
             {this.props.config} items={this.props.moviesPopular}/>
    return ( 
        {itemCarousel}
    )
}

Надеюсь, это поможет.