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

Question

这是代码框。

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

Material-UI 抱怨说：

警告：组件正在更改要控制的非受控输入。这可能是由于值从未定义更改为已定义值引起的，这不应该发生。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：https ://reactjs.org/link/controlled-components

以下是它显示所选日期的方式：

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

这是我的返回值：

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>
  );

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

我怎样才能解决这个问题？

标签： reactjsmaterial-uidatetimepicker

Answer 1

更改此代码：

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

至：

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

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