Question

在我的react应用程序中，我使用的API调用应通过令牌进行身份验证。因此，第一个调用是针对getToken，然后在会话中存储令牌，但是，每当我启动我的项目时，它在第一次运行时都会引发错误（标题错误），但是如果刷新它，一切都会正常。有人可以向我解释我所缺少的是异步呼叫问题吗？

下面是我的代码的一部分

1）。在加载过程中，我在这里调用页面的令牌和其他必需的API：

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

2）。这是我称为提取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填充值后才能呈现，则必须确保其他操作正常。

希望这会有所帮助：）

React-Redux：this.props.data.map不是函数错误

1 个答案: