javascript - this.props.history.push 在刷新后即可工作

Question

我有一个react-big-calendar，它有一个按钮，当我点击它时，他的模式会出现，我还有一个日历图标按钮，它将我重定向到另一个URL/计划。

我有一个对话框(AjouterDisponibilite)，我使用组件议程上的引用来调用它。

日历图标有一个 onClick 事件，我尝试:

this.props.history.push('/planning'); 

但是当我运行它并单击图标时，URL 定向正确，但我收到一个错误，如下所示:

TypeError:无法读取 null 的属性“handleAjouter” 和 无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明应用程序中存在内存泄漏。要修复此问题，请在 componentWillUnmount 方法中取消所有订阅和异步任务

刷新此页面后，它就可以工作了。

我的代码是:https://codesandbox.io/s/xw01v53oz

我该如何解决这个问题？

Answer 1

问题是引用文献使用不当。 Refs 旨在保留对 DOM 元素和组件实例的引用，而不是它们的函数。

带有 ref prop 的组件在安装时会将自己分配给 prop 的值(或者以自身作为参数调用函数)，并且它们也会对 执行相同的操作>null 卸载时引用。

有了这些知识，您必须更改 Agenda 组件的代码，如下所示:

ModalAjout = (ref) => {
    if (ref) {
        this.ajout = ref.handleAjouter;
    } else {
        this.ajout = null;
    }
}

ModalAjoutb = (ref) => {
    if (ref) {
        this.ajoutb = ref.handleAjouter;
    } else {
        this.ajoutb = null;
    }
}