不变冲突:`value`道具必须是Date对象的实例

Question

我正在构建一个表单，这两件事的表现很糟糕，当我按下其中一个按钮并选择任何日期或时间时，它会将标题中的上述错误作为

'自变量冲突：value道具必须是Date对象的实例'

此外，它还崩溃了在设备模拟器上构建的应用程序

import RNDateTimePicker from '@react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [datePicker,setDatePicker] = useState(false)
const [datei, setDatei] = useState(new Date())
const [timePicker,setTimePicker] = useState(false)
const [time,setTime] = useState(new Date(Date.now()))
function showDatePicker(){
setDatePicker(true)
}
function showTimePicker(){
setTimePicker(true)
}
function OnDateSelected(datei){
setDatei(datei);
setDatePicker(false)
}
function onTimeSelected(time){
setTime(time);
setTimePicker(false)
}

return (
<View style={styles.container}>
{datePicker && (
<RNDateTimePicker
value={datei}
mode={'date'}
// display={Platform.0S === 'ios' ? 'spinner' : 'default'}
is24Hour={true}
onChange={OnDateSelected}
style={styles.datePicker}
/>
)}
{timePicker && (
<RNDateTimePicker
value={time}
mode={'time'}
// display={Platform.0S === ‘ios' ? 'spinner' : ‘default'}
is24Hour={false}
onChange={onTimeSelected}
style={styles.datePicker}
/>
)}
{!datePicker && (
<View>
<TouchableOpacity
onPress={showDatePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>D A T E</Text>
</TouchableOpacity>
</View>
)}
{!timePicker && (
<View>
<TouchableOpacity
onPress={showTimePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>T I M E</Text>
</TouchableOpacity>
</View>
)}

Answer 1

基本

function OnDateSelected(event,datei){
console.log(datei,"date")
setDatei(datei);
setDatePicker(false)
}
function onTimeSelected(event,time){
console.log(time,"time")
setTime(time);
setTimePicker(false)
}

上述函数有问题，因为第一个参数是事件，而您将事件设置为值，所以需要设置日期或时间。

它现在起作用了。

查看此示例

https://snack.expo.dev/@gaurv1995/着迷的甜甜圈

import RNDateTimePicker from '@react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [datePicker,setDatePicker] = useState(false)
const [datei, setDatei] = useState(new Date())
const [timePicker,setTimePicker] = useState(false)
const [time,setTime] = useState(new Date(Date.now()))
function showDatePicker(){
setDatePicker(true)
}
function showTimePicker(){
setTimePicker(true)
}
function OnDateSelected(event,datei){
console.log(datei,"date")
setDatei(datei);
setDatePicker(false)
}
function onTimeSelected(event,time){
console.log(time,"time")
setTime(time);
setTimePicker(false)
}

return (
<View style={styles.container}>
{datePicker && (
<RNDateTimePicker
value={datei}
mode={'date'}
// display={Platform.0S === 'ios' ? 'spinner' : 'default'}
is24Hour={true}
onChange={OnDateSelected}
style={styles.datePicker}
/>
)}
{timePicker && (
<RNDateTimePicker
value={time}
mode={'time'}
// display={Platform.0S === ‘ios' ? 'spinner' : ‘default'}
is24Hour={false}
onChange={onTimeSelected}
style={styles.datePicker}
/>
)}
{!datePicker && (
<View>
<TouchableOpacity
onPress={showDatePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>D A T E</Text>
</TouchableOpacity>
</View>
)}
{!timePicker && (
<View>
<TouchableOpacity
onPress={showTimePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>T I M E</Text>
</TouchableOpacity>
</View>
)}
</View>
)
}
const styles = StyleSheet.create({
container:{
flex:1,
padding:40
}
})

希望能有所帮助。无需任何疑问

Answer 2

@gaurav roy下面的代码就是我要说的，并通过输入2022年9月1日中午12:00

输出显示2022-09-16T06:05.570Z

console.log("Hello Admin")
var currentTime = datei 
var currentOffset = currentTime.getTimezoneOffset();
var ISTOffset = 330; // IST
var ISTTime = new Date(currentTime.getTime() + (ISTOffset + 
currentOffset)*60000);
var hoursIST = ISTTime.getHours() 
var minutesIST = ISTTime.getMinutes()
console.log("datei",datei)
console.log("currentOffset", currentOffset)
console.log("ISTTime", ISTTime)
console.log("hoursIST", hoursIST)
console.log('minutesIST', minutesIST)