Загрузите компонент, когда все данные будут готовы

Question

Я использую React с Redux.В этом примере у меня есть мой класс с mapStateToProps и mapDispatchToProps

class EnigmaPage extends Component {

    constructor(props){
        super(props);
    }

    componentDidMount() {
        this.props.authCheckState();
    }

    readUserData() {
        this.props.loadLevel(this.props.userId);
    }

    render(){
        return (
            <div className={classes.EnigmaPage}>
                <div className={classes.Header}>
                    <div>
                        <LevelInfo 
                            difficulty={this.props.level.difficulty}
                            level={this.props.level.level}
                            readUserData={this.readUserData()}
                        />

                    </div>
                </div>
            </div>
        )
    }

}

const mapDispatchToProps = dispatch => {
    return {
        authCheckState: () => dispatch(actions.authCheckState()),
        getLevel: () => dispatch(actions.getLevel()),
        loadLevel:(id) => dispatch(actions.loadLevel(id))
    };
}
const mapStateToProps = state => {
    return {
        userId:state.auth.user,
        level:state.level.level
    }
}

Я хочу нажать на свой компонент LevelInfo значения уровень сложности и уровень , но эти 2 данные поступают от getLevel () , который является HTTP-запросом с задержкой.Страница загружается до получения всех данных из http-звонка.Я ищу способ дождаться загрузки компонента LevelInfo или перезагрузить компонент, когда все данные будут готовы.

Answer 1

Джохудер Гонсалес говорил о Spinner.Пользовательский интерфейс Material имеет множество примеров, которые легко применять.Пожалуйста, посмотрите следующее. Материал пользовательского интерфейса Прогресс

Answer 2

попробуйте использовать условный рендеринг :

isDataReady() {
    if(this.props.level.difficulty && this.props.level.level)
        return true;
    return false;
}

render(){
    return (
        <div className={classes.EnigmaPage}>
            <div className={classes.Header}>
                <div>
                {this.isDataReady() ? <LevelInfo 
                        difficulty={this.props.level.difficulty}
                        level={this.props.level.level}
                        readUserData={this.readUserData()}
                    />
             : <div> </div>}
                </div>
            </div>
        </div>
    );
}

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

Answer 3

Вам нужно сообщить вашему компоненту, что он будет ждать данных, необходимых для визуализации вашего Level компонента, поэтому в ваш EnigmaPage компонент напишите следующее:

render(){
    const { level } = this.props;
    if (!level) { return <LoadingComponentSpinner />; } // this will render only when level attr is not set, otherwise will render your `LevelInfo` component
    return (
        <div className={classes.EnigmaPage}>
            <div className={classes.Header}>
                <div>
                    <LevelInfo 
                        difficulty={this.props.level.difficulty}
                        level={this.props.level.level}
                        readUserData={this.readUserData()}
                    />

                </div>
            </div>
        </div>
    )
}

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

Answer 4

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

render() {
  return (
    <div className={classes.EnigmaPage}>
      <div className={classes.Header}>
        <div>
          {this.props.level && (
            <LevelInfo
              difficulty={this.props.level.difficulty}
              level={this.props.level.level}
              readUserData={this.readUserData()}
            />
          )}
        </div>
      </div>
    </div>
  );
}

Итак, здесь мы проверяем, определено ли this.props.level.Когда это undefined React ничего не рендерит, после получения данных рендерится компонент LevelInfo.Вы можете изменить условную логику рендеринга.Вы можете визуализировать Loading компонент, может быть, вместо ничего.Но в конце дня вы сделаете ваш компонент условно.