react-native-community/datetimepicker未设置其所有值

Question

我正在用@react-native-community/datetimepicker做一个数据拾取器，但是我面临着一个问题，在这个问题中，默认值不会改变它的年份和日期，但它会改变它的小时。

我做了一个逻辑来打开设置的日期和年份，在关闭/设置之后，它打开了设置的小时，这很奇怪，因为当我设置年和日时，它会在屏幕上更改它的值，但当我完成更改小时时，它们会将它的值设置为默认值

const [date, setDate] = useState(new Date());
const [show, setShow] = useState(false);
const [mode, setMode] = useState('date');
[enter image description here][1]
const initialState = {
    guests,
    smoking,
    date,
    show,
    mode
  };
  
const changeShowMode = () => {
    setShow(true)
    setMode('date')
}

const handleReservation = () => {
    console.log(JSON.stringify(initialState));
    setGuests(1)
    setSmoking(false)
    setDate(date)
}

  <View style={styles.formRow}>
        <Text style={styles.formLabel}>Date and Time</Text>
        <TouchableOpacity style={styles.formItem}
            style={{
                padding: 7,
                borderColor: '#512DA8',
                borderWidth: 2,
                flexDirection: 'row'
            }}
            onPress={() => changeShowMode()}
        >
            <Icon type='font-awesome' name='calendar' color='#512DA8' />
            <Text>
                {' ' + Moment(date).format('DD-MMM-YYYY h:mm A') }
            </Text>
        </TouchableOpacity>
        {show && (
            <DateTimePicker
                value={date}
                display='default'
                mode={mode}
                minimumDate={new Date()}
                minuteInterval={30}
                onChange={(event, date) => {
                    if (date === undefined) {
                        setShow(false)
                    }
                    else {
                        setShow(mode === 'time' ? false : true),
                        setMode('time'),
                        setDate(date)
                    }                          
                }}
            />
        )}
    </View>
    <View style={styles.formRow}>
        <Button
            title='reserver'
            color='#512DA8'
            onPress={() => handleReservation()}
            accessibilityLabel='Learn more about this purple button'
            />                
    </View>

您将看到时间是如何变化的，但是年份和日期却没有变化。https://i.stack.imgur.com/2FfuI.jpg

Answer 1

您的逻辑似乎是正确的，但当您更新状态时，在引擎盖下发生了一些事情。我一直在玩这个，为你准备了一份点心。这是link。

完整的代码在这里

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Button,
  TouchableOpacity,
  Alert,
} from 'react-native';
import Constants from 'expo-constants';
import Moment from 'moment';
import DateTimePicker from '@react-native-community/datetimepicker';


export default function App() {
  const [dateInfo, updateDateInfo] = React.useState({
    date: new Date(),
    show: false,
    mode: 'date',
  });
  const changeShowMode = () => {
    updateInfo({ show: true, mode: 'date' });
  };
  const updateInfo = (info) => {
    updateDateInfo({ ...dateInfo, ...info });
  };
  const handleReservation = () => {};
  return (
    <>
      <View style={styles.formRow}>
        <Text style={styles.formLabel}>Date and Time</Text>
        <TouchableOpacity
          style={styles.formItem}
          onPress={() => changeShowMode()}>
          <Text>
            {' ' + Moment(dateInfo.date).format('DD-MMM-YYYY h:mm A')}
          </Text>
        </TouchableOpacity>
        {dateInfo.show && (
          <DateTimePicker
            value={dateInfo.date}
            display="default"
            mode={dateInfo.mode}
            minimumDate={new Date()}
            minuteInterval={30}
            onChange={(event, dateTime) => {
              if (dateTime === undefined) {
                updateInfo({ show: false });
              } else if (dateInfo.mode === 'time') {
                let timeDate = Moment(dateTime);
                updateInfo({
                  show: false,
                  mode: 'date',
                  date: Moment(dateInfo.date)
                    .set('hour', timeDate.get('hour'))
                    .set('minute', timeDate.get('minute'))
                    .set('minute', timeDate.get('second'))
                    .toDate(),
                });
              } else {
                updateInfo({ mode: 'time', date: dateTime });
              }
            }}
          />
        )}
      </View>
      <View style={styles.formRow}>
        <Button
          title="reserver"
          color="#512DA8"
          onPress={() => handleReservation()}
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

基本上，我使用一个对象来更新date对象，而不是多次更新状态，这会导致问题。请看一下，看看这个是否工作正常。

祝好运