我正在使用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
3条答案
按热度按时间2nbm6dog1#
这是React v17库的一个问题。一个贡献者已经创建了一个fork来修复这个问题。你可以使用那个库来解决这个问题。
https://www.npmjs.com/package/@hassanmojab/react-modern-calendar-datepicker
Github线程：https://github.com/hassanmojab/react-modern-calendar-datepicker
2uluyalo2#
您可以使用日期选取器替代方法，如：
NPM包：https://www.npmjs.com/package/react-datepicker
以Github Link为例：https://github.com/Hacker0x01/react-datepicker
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在条件之间切换，没有错误。