Ant Design受控RangePicker清除按钮报错：解构非可迭代实例问题

问题原因 #

点击清除按钮时，RangePicker的onChange回调会传入null，而非预期的数组，此时尝试解构null就会触发报错：

Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a Symbol.iterator method.

解决方案 #

修改onChange的处理逻辑，兼容参数为null的情况，以下两种方式都能解决问题：

方式一：添加空值判断

function Demo() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = (props) => {
    if (props) {
      const [start, end] = props;
      setStartDate(start);
      setEndDate(end);
    } else {
      setStartDate(null);
      setEndDate(null);
    }
  };

  return (
    <RangePicker
      format={"DD-MM-YYYY"}
      value={[startDate, endDate]}
      onChange={handleChange}
    />
  );
}

方式二：使用解构默认值

利用ES6解构的默认值特性，当参数为null时自动使用默认数组，避免解构报错：

function Demo() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = ([start, end] = [null, null]) => {
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <RangePicker
      format={"DD-MM-YYYY"}
      value={[startDate, endDate]}
      onChange={handleChange}
    />
  );
}

两种方式都能实现清除后RangePicker显示为空状态的需求，且不会触发报错。

内容的提问来源于stack exchange，提问作者user20002028