无法在 React JS 中将 DateTimePicker 的 defaultValue 设置为空白

Question

我是反应js的新手。 我目前有一个带有简单 DateTimePicker 的 web 页面（我使用的 datetimepicker 来自react-widgets/lib/ ）。 所以我的想法是我有一个名为myvalue的变量。 如果不是 null，我将 DateTimePicker 的defaultValue设置为myvalue ，否则 - 我将 DateTimePicker 的默认输入值留空。

如果myvalue有值，则没有问题 - DateTimePicker 在输入中显示该值。 但是，如果myvalue为空并且我尝试将 DateTimePicker 输入设置为空白，则会引发错误：

Cannot read properties of undefined (reading 'map'): undefined 

这是我的代码片段：

function MyDateFunction(props) {
    const { t } = useTranslation();

    return (
        <Field>
            <HorizontalFlex>
                <DateTimePicker
                    defaultValue = { myvalue || ''}
                    
                />
            </HorizontalFlex>
        </Field>
    );
}

除了''我还尝试了 null、new Date() 和 ""。 这些都不起作用：C

非常感谢任何帮助！

Answer 1

首先，我宁愿使用 Nullish 合并运算符 (??)：

defaultValue = { myvalue ?? ''}

在您提供的代码片段中，除了您使用它的地方，我找不到任何对 myvalue 的引用； 这将导致错误，除非您提供的代码是您尝试从原始代码中获取的更简单的形式。

说到默认值，我会假设 myvalue 是您组件的属性。 我会做这种情况是这样的：

function MyDateFunction({myvalue = ''}) {

即使使用这种模式，在受控组件和不受控组件之间切换时也必须小心，因为 DateTimePicker 将不受控制。

最后，这是您问题背后的主要原因，该错误与使用 DateTimePicker API 有关。 提供其 NPM 页面将很有帮助。 主要是defaultValue好像不能是空字符串、原生日期或者null值； 你都试过了。 除非 API 调用有更多内容。

Answer 2

您应该将 defaultValue 设置为 null

function MyDateFunction(props) {
    const { t } = useTranslation();

    return (
        <Field>
            <HorizontalFlex>
                <DateTimePicker
                    defaultValue = { myvalue ? myvalue : null}
                    
                />
            </HorizontalFlex>
        </Field>
    );
}