React: TypeError: Cannot read properties of null (reading 'removeEventListener')

Question

我正在使用 React 并呈现一个可以选择日期范围的日历（@sentisso/react-modern-calendar-datepicker）。

我有一个按钮。单击此按钮时，我会更新该按钮的状态，如果为真，则会显示日期选择器。如果它是假的，我使用条件渲染隐藏日期选择器。

const [selectedDayRange, setSelectedDayRange] = useState({
    from: null,
    to: null  
});

return (
<>
    <input type="button" onClick={() => toggleDateRangeVisible()} />
    {isDateRangeVisible && 
        <Calendar
          value={selectedDayRange}
          onChange={setSelectedDayRange}
          shouldHighlightWeekends
        />
    }
</>
)

当我点击按钮时，会显示日期选择器。但是当我再次单击它以隐藏日期选择器时，出现了这个错误。 （可见的状态被改变了）

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'removeEventListener')

Call Stack
eval
node_modules/react-modern-calendar-datepicker/lib/index.js (1:19754)
safelyCallDestroy
node_modules/react-dom/cjs/react-dom.development.js (22932:0)
commitHookEffectListUnmount
node_modules/react-dom/cjs/react-dom.development.js (23100:0)
commitPassiveUnmountInsideDeletedTreeOnFiber
node_modules/react-dom/cjs/react-dom.development.js (25098:0)
commitPassiveUnmountEffectsInsideOfDeletedTree_begin
node_modules/react-dom/cjs/react-dom.development.js (25048:0)
commitPassiveUnmountEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24956:0)
commitPassiveUnmountEffects
node_modules/react-dom/cjs/react-dom.development.js (24941:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (27038:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (26984:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26935:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26682:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (26117:0)
flushSyncCallbacks
node_modules/react-dom/cjs/react-dom.development.js (12042:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (25651:0)

const toggleDateRangeVisible = () => setIsDateRangeVisible(!isDateRangeVisible);

这里是codesandbox。 https://codesandbox.io/s/musing-shadow-x978yh?file=/src/App.js

Answer 1

这是 React v17 库的问题。贡献者创建了一个分支来解决这个问题。您可能会为此使用该库。

https://www.npmjs.com/package/@hassanmojab/react-modern-calendar-datepicker

Github 线程：https://github.com/hassanmojab/react-modern-calendar-datepicker

Answer 2

您可以使用日期选择器替代方案，例如：

NPM 包：https://www.npmjs.com/package/react-datepicker

Github链接为例：https://github.com/Hacker0x01/react-datepicker

Answer 3

我在我的项目中尝试了库 @sentisso/react-modern-calendar-datepicker 并且发生了这个问题，在我的例子中我使用 Next JS 13.1.6 和 React 18.2.0。案例是：

当我尝试将日期选择器组件的显示从无更改为阻止时，它变得完美 但如果条件反转，从显示块到无，它返回 无法读取 null 的属性“removeEventListener”的错误。

我认为这与 React 框架的问题有关，因为它已在 2 年前在 React 17 的github 存储库中指出

但是，奇怪的是，当我用 react-datepicker 的另一个日期选择器尝试相同的代码时，问题就消失了。您可以使用 react-datepicker 在条件之间切换而不会出错。

Answer 4

您可以使用以下方式下载并安装它：

npm install --save @hassanmojab/react-modern-calendar-datepicker

然后将所有导入更改为：

import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';

这是一个临时包，作为解决这个问题的方案，不会开发。

参考：https://github.com/Kiarash-Z/react-modern-calendar-datepicker/issues/204