为什么 React Calendar 无法在父组件中工作？

Question

我对下面使用反应日历的 MyCalendar 组件有问题。我已记录

selectedValue

用于调试目的。

如果我单独渲染

MyCalendar

组件，则其内部状态

selectedValue

会相应地跟踪

Calendar

中的所选日期，并且

Calendar

会突出显示所选日期。

但是，如果我在

MyCalendar

中使用

DatePicker

组件，则

DatePicker

框中的值是正确的，但由于某种原因，子

MyCalendar

组件中的状态始终为

null

，因此所选日期不会在日历中突出显示。当在

selectedValue

中选择新日期时，

MyCalendar

中的

null

状态似乎会重新初始化为

DatePicker

。

有人能帮助我理解这里的问题是什么吗？我希望

MyCalendar

有自己的状态，而不是从父组件获取

Calendar

prop

value

。

const MyCalendar: React.FC<PropsCalendar> = ({
  onDateSelect,
  selectRange = false,
}) => {
  const [selectedValue, setSelectedValue] = useState<Value>(null);
  console.log(selectedValue)

  const handleDateChange = (value: Value) => {
    setSelectedValue(value);

    if (onDateSelect) {
      onDateSelect(value);
    }
  };

  return (
    <Calendar
      onChange={handleDateChange}
      value={selectedValue}
      calendarType="gregory"
      selectRange={selectRange}
    />
  );
};


export const DatePicker: React.FC<PropsDatePicker> = ({
  selectRange = false,
}) => {
  const [isSelectingDates, setIsSelectingDates] = useState(false);
  const [value, setValue] = useState<Value>(null);

  const handleChange = (value: Value) => {
    setValue(value);

    if (Array.isArray(value)) {
      // selecting a date range
      if (value[0] && value[1]) setIsSelectingDates(false);
    } else {
      setIsSelectingDates(false);
    }
  };

  return (
    <>
      <div
        onClick={(event) =>setIsSelectingDates(!isSelectingDates)}}
      >{value}</div>

      {isSelectingDates && (
        <MyCalendar
          onDateSelect={handleChange}
          selectRange={selectRange}
        />
      )}
    </>
  );
};

Answer 1

问题在于 MyCalendar 的状态 (selectedValue) 在 DatePicker 内重新呈现时会重置。要解决此问题，请将 selectedValue 的状态移至 DatePicker 并将其作为 prop 传递给 MyCalendar。这将允许 MyCalendar 使用 DatePicker 中的状态并确保正确跟踪所选日期。