Мне нужно выбрать дату, и в зависимости от даты нужно отобразить таблицу с данными, относящимися к этому дню, с помощью React Native - PullRequest
Новая
       88

Мне нужно выбрать дату, и в зависимости от даты нужно отобразить таблицу с данными, относящимися к этому дню, с помощью React Native

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

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

Ниже показан главный экран с DatePicker:

AttendanceScreen. js

import React, { useState } from 'react';
import { View,Table,TableHeader,TableRow,TableBody,TableHeaderColumn,TableRowColumn,Text} 
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:('Attendance')}
        })
        };

        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)}}}
        />
        <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderColumn><Text></Text></TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableRowColumn><Text></Text></TableRowColumn>
        </TableRow>
      </TableBody>
    </Table>
    </View>
   )
   };


   export default AttendanceScreen;

Когда я запускаю приложение, я получаю следующую ошибку:

Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга AttendanceScreen.

Подскажите, пожалуйста я ошибаюсь, и мне нужно отобразить выбранную дату внутри таблицы.

1 Ответ

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

Я думаю, у вас проблема с форматированием кода. Попробуйте скопировать это: 

import React, { useState } from 'react';
    import { View, Table, TableHeader, TableRow, TableBody, TableHeaderColumn, TableRowColumn, Text }
        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) => {
        const action = attendanceActions.fetchStudentAttendance(newDate);
        await dispatch(action);

        props.navigation.navigate({ routeName: ('Attendance') });
    };

    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) }
                }}
            />
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHeaderColumn><Text></Text></TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <TableRow>
                        <TableRowColumn><Text></Text></TableRowColumn>
                    </TableRow>
                </TableBody>
            </Table>
        </View>
    );
};

export default AttendanceScreen;
...