React Native：使用 FlatList 和 DatePicker 创建时间列表

Question

Objective: 当用户 selects 来自 DatePicker 的时间时显示时间列表。

问题：它只显示单个时间而不是时间列表。

我可以 select 从日期选择器中获取时间。当我点击 ok 时，选择的时间显示在平面列表中。但是，在 selecting new 时间后，old 时间将被替换。这导致在列表中仅显示 1 次。

我在下面添加了应用程序的屏幕截图。

因此，我们将不胜感激任何有关解决此问题的帮助。

下面的代码片段：

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import DatePicker from '@react-native-community/datetimepicker';
import Feather from 'react-native-vector-icons/Feather';
import moment from 'moment';

export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //Time
            appointmentTime: new Date(moment()),
            modeAppointmentTime: 'time',
            showAppointmentTime: false,
            textAppointmentTime: moment().format('h:mm a').toString(),

            //new timeSlots
            timeSlots: [],
        }
    }

    //[ timePicker start]
    setAppointmentTime = (event, appointmentTime, textAppointmentTime, timeSlots) => {
        appointmentTime = appointmentTime || this.state.appointmentTime;
        textAppointmentTime = textAppointmentTime || moment(appointmentTime).format('h:mm a').toString();
        this.setState({
            showAppointmentTime: Platform.OS === 'ios' ? true : false,
            appointmentTime,
            textAppointmentTime,

            //newly added
            timeSlots: [{ time: textAppointmentTime }],
        });
    }

    showTime = (modeAppointmentTime, textAppointmentTime, timeSlots) => {
        textAppointmentTime = moment(this.state.appointmentTime).format('h:mm a').toString();
        this.setState({
            showAppointmentTime: true,
            modeAppointmentTime,
            textAppointmentTime,

            //newly added
            timeSlots: [{ time: textAppointmentTime }],
        })
    }

    timePicker = () => {
        this.showTime('time');
    }
    //[ timePicker end ]

    getAppointmentTimePage() {
        //const { timeSlots, selectedValue } = this.state;
        const {
            appointmentTime,
            showAppointmentTime,
            modeAppointmentTime,
            textAppointmentTime
        } = this.state;

        return (
            <View>
                <Text style={[styles.title, { marginTop: 20 }]}>Select Appointment Time:</Text>
                <View style={styles.container}>
                    {<TouchableOpacity onPress={this.timePicker}>
                        <Text style={styles.textDate}>
                            {textAppointmentTime}
                        </Text>
                    </TouchableOpacity>}
                    {showAppointmentTime && <DatePicker
                        value={appointmentTime}
                        mode={modeAppointmentTime}
                        onChange={this.setAppointmentTime}
                        minimumDate={new Date(moment())}
                    />}
                </View>
                <TouchableOpacity style={styles.addContainer}>
                  <Text style={styles.addText}>Add Appointment</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <ScrollView>
                {this.getAppointmentTimePage()}
                <TouchableOpacity>
                    <View style={styles.row}>
                        <FlatList
                            data={this.state.timeSlots}
                            keyExtractor={(times) => times.time}
                            renderItem={({ item }) => {
                                return (
                                    <View>
                                        <Text style={styles.textTime}>{item.time}</Text>
                                        <TouchableOpacity>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                );
                            }}
                        />
                    </View>
                </TouchableOpacity>
            </ScrollView>
        )
    };
};

Answer 1

您唯一需要做的更改是在数组中追加项目而不是更新数组对象。

timeSlots: [...this.state.timeSlots,{ time: textAppointmentTime }],

错误是您将数组视为对象。

React Native：使用 FlatList 和 DatePicker 创建时间列表

React Native: Create Time List using FlatList and DatePicker

javascript

react-native

datetimepicker

react-native-flatlist