React-Redux: this.props.data.map не является ошибкой функции

Question

В моем приложении реакции я использую вызовы API, которые должны аутентифицироваться токеном. поэтому первый вызов для getToken и последующее сохранение токена в сеансе, но всякий раз, когда я запускаю свой проект, он всегда выдает ошибку при первом запуске (ошибка в заголовке), но если я обновляю его, все работает. Может кто-нибудь объяснить мне, чего мне не хватает, это проблема Async Calls?

Ниже приведена часть моего кода

1). Здесь я вызываю токен и другой необходимый API для моей страницы во время загрузки:

componentDidMount() {
 this.props.getToken('react@e-yantra.org','react007zxt');
  //sessionStorage.setItem('jwtToken', this.props.token);
   this.props.fetchStates();
   this.props.fetchVenues();
}

2). Это действие, при котором я вызываю fetch API:

import {
    FETCH_STATES,
    FETCH_VENUES
} from '../actions/types';

const token = sessionStorage.getItem('jwtToken');
const postheaders={
 'Content-Type': 'application/x-www-form-urlencoded'
};

export const getToken = (username,password) => dispatch=>{
        fetch('http://localhost:8001/api/getToken',{
          method: 'POST',
          headers: postheaders,
          body:JSON.stringify({username,password})
        })
            .then(res => res.json())
            .then(token =>{
              let str=JSON.stringify(token.token).replace(/"/g,"");
              sessionStorage.setItem('jwtToken',str);
            });
    };


export const fetchStates = () => dispatch => {
    fetch(`http://localhost:8001/api/states?token=${token}`)
        .then(res => res.json())
        .then(states => dispatch({
            type: FETCH_STATES,
            payload: states
        }));
};


export const fetchVenues=()=>dispatch=>{
       fetch('http://localhost:8001/api/venues')
           .then(res => res.json())
           .then(venues => dispatch({
               type: FETCH_VENUES,
               payload: venues
           })
           );
};

3). Ниже приведена часть рендера, где я использую его и получаю сообщение об ошибке при первом запуске:

const stateItems = this.props.states.map(data => (
           <option key={data.id} value = {data.state} > {data.state} </option>
       ));

             ));
  const venueItems = this.props.venues.map(venue => (
                           <option key={venue.id} value = {venue.id} > {venue.college_name} </option>
                       ));

Редактировать 1: Проблема в том, что токен устанавливается в хранилище сеансов, которое недоступно для первых вызовов API состояний и мест.

http://localhost:8001/api/states?token=null 400 (Bad Request)

Answer 1

При первом рендеринге выполняется вызов API, поэтому, скорее всего, когда вы пытаетесь получить доступ к this.props.states, он undefined или пустой.

Условная проверка его доступности должнаработать для вас, что-то вроде this.props.states && this.props.states.map(..)

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

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