javascript - React Js - 组件正在更改要控制的不受控制的输入。这可能是由于值从 undefined 更改为 defined

Question

H 伙计们 - 创建了一个拆分日期输入组件（DD/MM/YYY 的 3 个输入） - 我遇到了一些问题，我使用以下行在渲染时预填充 DD/MM/YYYY 字段应该是一个类似的值所以存在“28-08-2022”：

const [intialDay, initialMonth, initialYear] = dateInputValue.split("-");

这意味着这些值已预先填充到输入中，如果值 fordateInputValue不存在，它们将是undefined.

在这些输入开始为空白输入后更新这些输入时，我在控制台中遇到错误（没有通过传递的值dateInputValue）

谁能建议重构我的代码的最佳方法，以便我不会在控制台中收到这些错误？

错误：*“组件正在更改要控制的非受控输入。这可能是由值从未定义更改为已定义值引起的，这不应该发生。”*

代码片段：

const DateInput = ({ name, onValueChange, dateInputValue }: Props) => {
  const [intialDay, initialMonth, initialYear] = dateInputValue.split("-");
  const [day, setDay] = useState(intialDay);
  const [month, setMonth] = useState(initialMonth);
  const [year, setYear] = useState(initialYear);

  const storedDateValue = useRef();

  console.log("Base date value: " + dateInputValue);

  const changeDate = useCallback(
    (birthday) => {
      onValueChange(birthday);
    },
    [onValueChange]
  );

  useEffect(() => {
    if (day !== "" && month !== "" && year !== "") {
      const dateValue = `${day}-${month}-${year}`;

      if (storedDateValue.current !== dateValue) {
        storedDateValue.current = dateValue;

        changeDate(dateValue);
      }
    }
  }, [day, month, year, changeDate]);

  return (
    <StyledInputGroup>
      <label htmlFor={`${name}_day`}>
        <span>Day</span>
        <StyledInput
          type="text"
          maxLength="2"
          name={`${name}_day`}
          id={`${name}_day`}
          label="Day"
          value={day}
          onChange={(e) => setDay(e.target.value)}
        />
      </label>
      <label htmlFor={`${name}_month`}>
        <span>Month</span>
        <StyledInput
          type="text"
          maxLength="2"
          name={`${name}_month`}
          id={`${name}_month`}
          label="Month"
          value={month}
          onChange={(e) => setMonth(e.target.value)}
        />
      </label>
      <label htmlFor={`${name}_year`}>
        <span>Year</span>
        <StyledInput
          type="text"
          maxLength="4"
          name={`${name}_year`}
          id={`${name}_year`}
          value={year}
          onChange={(e) => setYear(e.target.value)}
        />
      </label>
    </StyledInputGroup>
  );
};

标签： javascriptreactjsdatetimesetstate