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

Question

我正在尝试为用户构建 select 使用 DateTimePickerModal 约会的功能。在 selected 之前，应该有一条可点击的消息，上面写着“Select 日期”，然后由 selected 日期替换。我不确定是否有标准方法可以做到这一点，但我正在考虑有条件地渲染 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>
    );
};

一切正常，直到我 select 一个日期，当我收到以下错误消息时：

Answer 1

根据您使用的包the documentation，返回的date是一个标准的日期对象。

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

例如：

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

Answer 2

如错误消息所述，无法将对象呈现为组件的子项。我的猜测是 handleConfirm 函数将开始日期设置为对象而不是字符串。我建议尝试将其转换为字符串，例如：

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

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

Conditionally render date state variable in JSX Text

javascript

datetimepicker

reactjs

react-native

react-hooks