reactjs React:类型错误:无法读取null的属性(正在阅读“removeEventListener”)

cwxwcias  于 2023-02-08  发布在  React
关注(0)|答案(3)|浏览(247)

我正在使用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
        />
    }
</>
)

当我单击按钮时,显示日期选择器。但是当我再次单击按钮以隐藏日期选择器时,出现此错误。(可见状态已更改)
x一个一个一个一个x一个一个二个x
下面是代码和框。https://codesandbox.io/s/musing-shadow-x978yh?file=/src/App.js

2nbm6dog

2nbm6dog1#

这是React v17库的一个问题。一个贡献者已经创建了一个fork来修复这个问题。你可以使用那个库来解决这个问题。
https://www.npmjs.com/package/@hassanmojab/react-modern-calendar-datepicker
Github线程:https://github.com/hassanmojab/react-modern-calendar-datepicker

2uluyalo

2uluyalo2#

您可以使用日期选取器替代方法,如:
NPM包:https://www.npmjs.com/package/react-datepicker
以Github Link为例:https://github.com/Hacker0x01/react-datepicker

z31licg0

z31licg03#

我在我的项目中尝试了库@ sensisso/react-modern-calendar-datepicker,但出现了这个问题。在我的案例中,我使用的是Next JS 13.1.6和React 18.2.0。
当我尝试将日期选择器组件的显示从none更改为block时,它运行得很好,但如果条件相反,从display block更改为none,它将返回无法读取null的属性“removeEventListener”的错误。
我认为这与react框架的问题有关,因为它在2年前的github repo of the React 17中已经指出
但奇怪的是,当我用react-datepicker中的另一个日期选择器尝试相同的代码时,问题消失了,你可以使用react-datepicker在条件之间切换,没有错误。

相关问题