ReactJS с использованием Ioni c Uncaught TypeError: Невозможно прочитать свойство 'map' undefined из запроса ax ios - PullRequest
Новая
       12

ReactJS с использованием Ioni c Uncaught TypeError: Невозможно прочитать свойство 'map' undefined из запроса ax ios

0 голосов
/ 26 апреля 2020

Я получил файл schedules.ts и получил функцию getSchedules()

import axios from 'axios'

export default function getSchedules(){
    const config = {
        headers: { Authorization: 'Bearer ' + localStorage.getItem('bearer_token') ,
        Accept: 'application/json',
        'Content-Type': 'application/json',
        }
    };
     return axios.get('http://127.0.0.1:8000/api/auth/getSchedules',config).
      then((res)=>{
       return res.data
      }).catch((err)=>{
        console.log(err)
      })
}

В моем компоненте Tab1 я хочу получить данные из моего запроса топора ios и отобразить его с помощью массива .map 

import getSchedules from '../methods/schedules'

const Tab1: React.FC = () => {

  const [schedules, setSchedules] = React.useState([]);

  React.useEffect(() => {
    getSchedules().then(data => setSchedules(data.schedules));
  }, []);


  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Appointments</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
    <IonList>

      {schedules.map(elem => {
        return(
          <IonItem key={elem['id']}>
          <IonLabel>
            <h2>{elem['schedule_type']}</h2>
            <h3>{elem['type']}</h3>
            <h3>{elem['start_date']}</h3>
          </IonLabel>
        </IonItem> 
        )
      })}

    </IonList>
  </IonContent>
    </IonPage>
  );
};
export default Tab1;

Но когда я go к компоненту, я получил

Tab1.tsx:38 Uncaught TypeError: Cannot read property 'map' of undefined

Я новичок, чтобы реагировать, и эта машинопись вещь. Я sh могу использовать v-for, как в vue. js. Может кто-нибудь сказать мне, в чем проблема и как я могу решить? Спасибо ..

1 Ответ

1 голос
/ 26 апреля 2020

Проблема оказалась в том, что возвращаемый из API data не имел свойства schedules, поэтому setSchedules(data.schedules) делает schedules undefined. Данные в целом уже являются требуемым массивом, поэтому необходимо вызвать setSchedules с data в качестве аргумента.

То есть тело useEffect должно быть 

getSchedules().then(data => setSchedules(data));

, который, если хотите, можно упростить до 

getSchedules().then(setSchedules);
...