Javascript 在JSX文本中有条件地呈现日期状态变量

我正在尝试为用户构建使用

DateTimePickerModal

选择日期的功能。在选择任何内容之前，都应该有一条可点击的消息，上面写着“Select date”（选择日期），然后用所选日期替换。我不确定是否有一种标准的方法可以做到这一点，但我正在考虑有条件地呈现

Text

如下：

const AddActivityScreen = props => {
    const [startDate, setStartDate] = useState(null);
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);
    
    const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
    };

    const showDatepicker = () => {
        showMode('date');
    };

    const handleConfirm = (date) => {
        setStartDate(date);
        hidePicker();
    };

    const hidePicker = () => {
        setShow(false);
    };

    return (
        <View style={styles.container}>
            <DateTimePickerModal 
                isVisible={show}
                mode={mode}
                onConfirm={handleConfirm}
                onCancel={hidePicker}
            />
            <View>
                { startDate ? (
                    <Text onPress={showDatepicker}>{startDate}</Text> // something is going wrong here!
                ) : (
                    <Text onPress={showDatepicker}>Select a date</Text>
                )}
            </View>
        </View>
    );
};

const AddActivityScreen=props=>{
常量[startDate，setStartDate]=useState（null）；
const[mode，setMode]=useState（'date'）；
const[show，setShow]=useState（false）；
const showMode=currentMode=>{
设置显示（正确）；
设置模式（当前模式）；
};
常量showDatepicker=（）=>{
显示模式（“日期”）；
};
const handleConfirm=（日期）=>{
设置开始日期（日期）；
hidePicker（）；
};
常数hidePicker=（）=>{
设置显示（假）；
};
返回(
{开始日期(
{startDate}//这里出了点问题！
) : (
选择一个日期
)}
);
};

直到我选择了一个日期，当我收到以下错误消息时，一切都正常工作：

根据您使用的软件包的类型，返回的日期是标准日期对象

如果要渲染它，必须首先使用适当的格式化方法将其转换为字符串

例如：

<View>
     <Text onPress={showDatepicker}>{startDate ? startDate.toLocaleDateString("en-US") : "Select a date"}</Text>
</View>

{startDate？startDate.toLocaleDateString（“en-US”）：“选择一个日期”}

根据您使用的软件包的类型，返回的日期是标准日期对象

如果要渲染它，必须首先使用适当的格式化方法将其转换为字符串

例如：

<View>
     <Text onPress={showDatepicker}>{startDate ? startDate.toLocaleDateString("en-US") : "Select a date"}</Text>
</View>

{startDate？startDate.toLocaleDateString（“en-US”）：“选择一个日期”}

正如错误消息所说，对象不能作为组件的子对象呈现。我的猜测是

handleConfirm

函数将开始日期设置为对象而不是字符串。我建议尝试将其转换为字符串，如下所示：

<Text onPress={showDatepicker}>{JSON.stringify(startDate)}</Text>

{JSON.stringify（startDate）}

正如错误消息所说，对象不能作为组件的子对象呈现。我的猜测是

handleConfirm

函数将开始日期设置为对象而不是字符串。我建议尝试将其转换为字符串，如下所示：

<Text onPress={showDatepicker}>{JSON.stringify(startDate)}</Text>

{JSON.stringify（startDate）}

您正在文本中呈现日期，该文本只接受字符串。尝试执行

startDate.toString（）

。您正在文本中呈现日期，该文本只接受字符串。尝试执行

startDate.toString（）

。谢谢！如果您能告诉我为什么在我选择一个日期后，

DateTimePickerModal

会重新打开，然后在我再次选择一个日期后关闭，您将获得额外的积分。讨论已链接，但我没有使用Formik。谢谢！如果您能告诉我为什么在我选择一个日期后，

DateTimePickerModal

会重新打开，然后在我再次选择一个日期后关闭，您将获得额外的积分。讨论已链接，但我没有使用Formik。