Я хочу отображать данные из api, связанные с выбранным вводом даты - PullRequest
Новая
       150

Я хочу отображать данные из api, связанные с выбранным вводом даты

0 голосов
/ 13 июля 2020

Я разрабатываю приложение React Native. Мое требование - иметь средство выбора даты. Когда я выбираю дату, должен отображаться экран с данными (данные поступают из API), относящимися к выбранной дате.

Я не могу передать данные из API на второй экран для отображения.

Вот мой первый экран с вводом даты.

AttendanceScreen: 

import React, { useState } from 'react';
import { View,StyleSheet} from 'react-native';
import DatePicker from 'react-native-datepicker';
import * as attendanceActions from '../../store/actions/attendance';
import { useDispatch} from 'react-redux';



const AttendanceScreen = props => {
const dispatch = useDispatch();
const [date, setDate] = useState(new Date);

const goToDateAPI =  async (newDate) => {

// console.log(newDate);  
let action
  action =  attendanceActions.fetchStudentAttendance(
          newDate
           );  
           await dispatch(action); 

           props.navigation.navigate({routeName:('Attendance2'),params:
           {
             dateValue:newDate
           }
        })  
  };

 return (
  
    <View>  
        <DatePicker
            style={{ width: 200 }}
            date={date}
            mode="date"
            placeholder="select date"
            format="DD MMM YYYY"
            minDate="01 Jan 2020"
            maxDate="30 Dec 2021"
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
                dateIcon: {
                    position: 'absolute',
                    left: 0,
                    top: 4,
                    marginLeft: 0
                },
                dateInput: {
                    marginLeft: 36
                }
                
            }}
          
            onDateChange={(newDate) => {setDate(newDate) ; 
             // console.log(newDate); 
              {goToDateAPI(newDate)};
          
            
            }}
        />

       
       </View>
     
   )
   };

   export default AttendanceScreen;

Мой второй экран - это класс действий с деталями api:

посещаемость. js: 

import Attendance from "../../models/Attendance";
import {AsyncStorage} from 'react-native';

export const SET_STUDENT_ATTENDANCE = 'SET_SET_STUDENT_ATTENDANCE';

export const fetchStudentAttendance = (newDate) => {
return async (dispatch,getState) =>{
  const userData = await AsyncStorage.getItem('userData');
  const transformedData = JSON.parse(userData);
  const { token } = transformedData;
console.log(newDate);
 const Date = newDate;
  try{const response = await fetch(
      `http://.........../api/stud/Get_Stud_Attendance_Details?Date=${Date}`,
      {
        headers: {
        'Content-Type': 'application/json',
         'Authorization':token
      },
    }
    );


  const resData = await response.json();
  console.log(resData);

  const WeeklyAttendanceList = resData.WeeklyAttendanceList;

  const loadedStudentAtt = [];

  WeeklyAttendanceList.forEach(item => {
  loadedStudentAtt.push(new Attendance(
  item.SessionDate,
  item.SubjectAbbr,
  item.Att,
  ))
  })

  dispatch({type: SET_STUDENT_ATTENDANCE,studentattendance:loadedStudentAtt});
 }
 catch(err){
 console.log(err);
 throw err;

};
};
};

Мой третий экран - это вид, который мне нужен с деталями API, относящимися к выбранному Дата:

AttendanceScreen2: 

import React, { useState,useEffect } from "react";
import { StyleSheet, View ,FlatList} from "react-native";
import AttendanceTableScreen from '../../components/university/AttendanceTableScreen';
import { useSelector,useDispatch} from 'react-redux';
import * as attendanceActions from '../../store/actions/attendance';

const AttendanceScreen2 =  props  => {
const studentattendance = useSelector(state => state.attendance.studentattendance);
const dispatch = useDispatch();
const [isLoading,setIsLoading] = useState(false);

useEffect(() => {
const loadStudentAttendance= async ()=>{
 setIsLoading(true);
  await dispatch(attendanceActions.fetchStudentAttendance());
  setIsLoading(false);
  //setIsLoading(true);
};
loadStudentAttendance();
},[dispatch]);
return (
<View>
 <FlatList data={studentattendance}
keyExtractor={item => item.SessionDate}
  renderItem={itemData => (
<AttendanceTableScreen
SessionDate={itemData.item.SessionDate}
SubjectName={itemData.item.SubjectName}
Att={itemData.item.Att}
>
</AttendanceTableScreen>
  )}/>
  </View>

 )}

 export default AttendanceScreen2;

Вот экран AttendanceTableScreen. js, используемый на моем третьем экране: 

import React, { useState } from 'react';
import { View,Text} from 'react-native';

const AttendanceTableScreen = props => {
return (
    <View>   
        <Text>Attendance Table</Text> 
        <Text>Seesion Date: {props.SessionDate}</Text>
        <Text>Subject Name: {props.SubjectName}</Text>
        <Text>Attendance: {props.Att}</Text>
    </View>
)
};


export default AttendanceTableScreen;

Когда я запускаю приложение, я могу введите дату, получив данные API, но я не могу подключиться со второго экрана к третьему экрану. Я получаю следующую ошибку:

[Необработанное отклонение обещания: TypeError: null не является объектом (оценка 'WeeklyAttendanceList .forEach ')]

Банка Кто-нибудь посоветует мне правильный процесс или подключение второго и третьего экрана с данными API? Заранее спасибо.

...