为什么 Material-UI 日期与占位符重叠值并抱怨受控输入？

Question

这里是 codesandbox.

我想创建一个 DateOnly 组件，我可以在我的项目中轻松使用它。

并且 Material-UI 抱怨说：

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

这是显示所选日期的方式：

我知道受控输入意味着你同时绑定value={value}和onChange={(newValue) => setValue(newValue);}。

这是我的 return 值：

return (
    <div>
      <KeyboardDatePicker
        error={isValid() ? false : true}
        id={id}
        label={placeholder}
        format="MM/dd/yyyy"
        value={currentValue}
        onChange={(date) => {
          setCurrentValue(date);
        }}
        KeyboardButtonProps={{
          "aria-label": "Change " + placeholder
        }}
        fullWidth
      />
    </div>
  );

但我不知道为什么这个日期字段无法识别。

我该如何解决这个问题？

Answer 1

更改此代码：

const [currentValue, setCurrentValue] = useState(
  new Date(value) || new Date()
);

收件人：

const [currentValue, setCurrentValue] = useState(
  value ? new Date(value) : new Date()
);

new Date(undefined) 是一个无效的日期（因为你的组件没有初始化 value 属性）。当您将无效的日期值传递给选择器组件时，它无法注册，因此它认为您正在使用不受控制的模式并发生意外结果。