Как обрабатывать метод рендеринга, пока его не вернет результат?

Question

Я создаю компонент, который извлекает некоторые API для заполнения результата. Для этих результатов API необходимо выполнить некоторые преобразования перед рендерингом. Я использовал componentWillMount метод для установки избыточного состояния. Мне нужно обработать метод render, пока эти результаты не будут преобразованы в реквизит. Это займет некоторое время. Поскольку данные недоступны, метод рендеринга в этот момент потерпит неудачу. Я попытался установить default state, но, похоже, это не работает, поскольку redux state будет сопоставлен с реквизитом с помощью метода mapStateToProps. Как правильно и эффективно подходить к такому делу?

Заранее спасибо

Answer 1

Поскольку вы используете Redux, вы можете установить значение по умолчанию Redux state в Reducers, используя параметры по умолчанию ES6. Примерно так:

const apiStatus = (state='fetching', action) => {
   // handle dispatch action
}

А в React вы можете использовать Условный рендеринг до render, например, значок загрузки, в то время как состояние fetching. Тогда, когда состояние finished, возьмите результат и render реальные элементы.

Чтобы работать с Async в Redux, перейдите по этой ссылке: Асинхронное действие

Answer 2

Прежде всего componentWillMount не является хорошим методом для вызова API, согласно реактивной документации:

componentDidMount () вызывается сразу после того, как компонент монтируется (вставляется в дерево). Инициализация, которая требует DOM узлы должны идти сюда. Если вам нужно загрузить данные из удаленной конечной точки, Это хорошее место для создания экземпляра сетевого запроса.

Этот метод является хорошим местом для настройки любых подписок. Если вы делаете что, не забудьте отписаться в componentWillUnmount ().

Вот ссылка: https://reactjs.org/docs/react-component.html#componentdidmount

Вот что вы можете сделать до загрузки данных: получить один флаг в состояние избыточности с именем dataLoaded:false После загрузки данных вы выполнили операции, которые вы можете легко изменить.

А в render()

if(this.props.dataLoaded){
  <loadingComponent></loadingComponent>
} else {
  //operation is performed
}

Answer 3

Если ваши данные не готовы, вы можете использовать условный рендеринг. Добавить дополнительный индикатор о ваших данных, как этот

 render() { 
    if (!this.props.data) { 
       return null;
    }
    return <YourComponent />;
}

И вам лучше получить данные в componentDidMount жизненном цикле.

Answer 4

Я бы проверил наличие реквизита в методе рендеринга с троичным выражением в качестве своего рода защитного предложения. Примерно так, например:

render(){
    return (<React.Fragment>
    { this.props.user ? <IntendedComponent ...this.props.user /> : <Loading user={defaultUser}/> }
    <React.Fragment/>);
}

Если пользовательский реквизит еще не заполнен, он должен быть пустым и отображать альтернативный компонент (например, компонент загрузки в примере) или предполагаемый компонент со значениями по умолчанию, жестко закодированными. Как только данные на месте, вы можете передавать данные компоненту по своему усмотрению.

Answer 5

Обычно вы визуализируете другую вещь (или вообще не визуализируете), когда ваши данные отсутствуют.

{this.props.unreadMessages.length > 0 &&
    <h2>
      You have {this.props.unreadMessages.length} unread messages.
    </h2>
}

или

if (this.props.unreadMessages.length > 0) {
  return <Main unreadMessages={this.props.unreadMessages} />;
} else {
  return <Loading />
}

Вы также можете иметь исходное состояние по умолчанию и выполнять рендеринг на основе этого, когда props не имеет данных. может быть с чем-то вроде:

<h2>
 Hello, {this.props.username || this.state.username}.
</h2>

Кроме того, рекомендуемый хук жизненного цикла для вызова Ajax: componentDidMount.