Как ждать, пока приставка подготовит необходимые данные

Question

Я использую response-localize-redux для своего многоязычного приложения и MySQL для извлечения данных.Для одного из моих действий нужны данные о локали, чтобы передать их бэкэнду в качестве аргумента, чтобы бэкэнд отвечал правильными данными.Но к тому времени, когда станет доступен язык, будет вызвано действие и произойдет сбой приложения, как я могу решить проблему?Вот код:

import React, { Component } from 'react'
import RestaurantCard from './RestaurantCard';
import {Row} from 'react-bootstrap';
import { connect } from 'react-redux';
import {getAllRestaurants} from "../actions/restaurantActions";
import { withLocalize } from 'react-localize-redux';

class RestaurantCardColumns extends Component {

  constructor(props){
    super(props);
  }

  componentDidMount(){
    this.props.getAllRestaurants(this.props.activeLanguage);
  }

  render() {
    if(this.props.loading || this.props.restaurants === null){
      return <p>Loading...</p>
    } else {
      return (
        <Row>
            <RestaurantCard data = {this.props.restaurants[0]}/>
            <RestaurantCard data = {this.props.restaurants[1]}/>
            <RestaurantCard data = {this.props.restaurants[2]}/>
            <RestaurantCard data = {this.props.restaurants[3]}/>
        </Row>)
    }
  }
}
const mapStateToProps = (state) =>{
  return {
      auth: state.auth,
      errors: state.errors,
      restaurants: state.restaurData.restaurants,
      loading: state.restaurData.loading
  }
}

export default connect(mapStateToProps, {getAllRestaurants})(withLocalize(RestaurantCardColumns));

Моя проблема в этой конкретной строке:

this.props.getAllRestaurants(this.props.activeLanguage);

Когда я отлаживаю, я вижу, что activeLanguage доступен в render() жизненном цикле.Как я могу ждать этого свойства, прежде чем позвонить getAllRestaurants

Answer 1

Проверьте наличие this.props.activeLanguage перед извлечением данных.Запускать выборку данных, как только activeLanguage становится доступным.И, наконец, убедитесь, что выборка происходит только один раз (если вам нужно)

class RestaurantCardColumns extends Component {

  constructor(props){
    super(props);
    this.didFetch = false; // store outside of state to not trigger rendering
  }

  componentDidMount(){
    this.fetchAllRestaurants();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.activeLanguage !== this.props.activeLanguage) {
      this.fetchAllRestaurants();
    }
  }

  fetchAllRestaurants() {
    if (!!this.props.activeLanguage && !this.didFetch) {
      this.props.getAllRestaurants(this.props.activeLanguage);
      this.didFetch = true;
    }
  }

Имейте в виду, что этот подход полностью зависит от существования компонента, т.е. если компонент не находится в виртуальной DOM, вызов API не будетбывает.Вам следует подумать о том, чтобы инициировать вызов с использованием промежуточного программного обеспечения для редукса, например redux-thunk или redux-saga, как предлагают другие люди.

Answer 2

Используйте промежуточное программное обеспечение для улучшения магазина, такое как Thunk. Похоже, вы делаете асинхронный запрос, а средства улучшения хранилища позволяют выполнять асинхронные вызовы и извлекать данные из серверной части. Промежуточное программное обеспечение, такое как Thunk, останавливает диспетчеризацию действия по умолчанию, выполняет асинхронные запросы и вызывает диспетчеризацию, чтобы передать действие вместе с обновленной полезной нагрузкой редуктору. Использование правильного async - await в componentDidMount также справится с этим, но усилители магазина на самом деле справятся с этим за вас. Вот пример:

async componentDidMount() {
    await this.props.getAllRestaurants(this.props.activeLanguage);
}

Answer 3

ComponentDidMount должен быть асинхронной функцией, и вы должны ждать getAllRestaurants для завершения.

В дополнение к этому у вас должна быть локальная переменная состояния (например, IsLoading), которая указывает, что данные не готовы. После 'жду Утверждение getAllRestaurants, вы устанавливаете isLoading в Falase.

Render проверит это локальное состояние, чтобы отобразить счетчик или сами данные, или сообщение об ошибке, если getAllRestaurants завершится неудачно (в дополнение к проверке isLoading, вы должны проверить хранилище примитивов, где вы будете хранить не только данные , но также переменная, указывающая, был ли getAllRestaurants успешным или неудачным).