我有一个 React 组件，表示带有输入（文本、数字、日期）的表单。日期输入有一个默认值 - Today( today)。我将这一组件用于两个功能：创建对象和编辑对象。在第一种情况下，默认情况下所有输入都是空的，除了包含值的日期输入today。在第二种情况下，输入从可选的 props( values) 接收默认值，这些默认值从父组件的状态提供给组件。该组件以两份副本呈现在页面上，一份values已传输，另一份未传输。由于存在values是可选的，因此我在每个输入的默认值中包含了一个条件语句。在日期导入的情况下，它看起来像这样：
defaultValue={inputValues?.date ? inputValues.date : today}
在其他情况下，today会放置一个空字符串''。
我预计当状态发生变化时，组件将被重新渲染并插入到默认输入值中values。实际上，这种情况仅发生在默认为空的输入中，并且带有日期的输入始终具有值today。
通过控制台，我看到组件渲染时，inputValue该值是未定义的（useState它显示为空括号），所以一开始我认为values它在渲染时没有时间出现。但是，当您单击编辑按钮时，values控制台中会显示正确的内容。在我的理解中，此时组件应该values根据表达式重新渲染并替换该值，{inputValues?.date ? inputValues.date : today}
但实际上，日历的值 = today，所有其他输入的值 = values。如果将表达式替换today为空字符串，那么当您调用编辑函数时，编辑表单中的日历值 = inputValues.date，但创建表单中的默认值现在为空，因为 today在这种情况下未指定。
此行为并非日历所独有，任何其他输入的行为方式相同，如果在表达式中，请将空字符串替换为任何值。如果您解释此行为以及如何解决它，我将非常高兴。
测试用例
import React, { useState } from 'react';
export default function Parent() {
const [values, setValues] = useState();
const change = () => setValues({ name: 'name', date: '2023-11-28' });
return (
<Child values={values} change={change} />
);
}
function Child({ values, change }) {
console.log(values);
return (
<div className="container">
<button type="button" onClick={change} >clickMe</button>
<input type="text" defaultValue={values?.name ? values.name : ''} />
<input type="date" defaultValue={values?.date ? values.date : '2023-11-20'} />
</div>
);
}
