this.props.history.push 正在刷新后工作

Question

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

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

并且日历图标有一个 onClick 我尝试的事件：

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

但是当我运行它并单击图标时，URL 的方向是正确的，但是我得到一个 error，如下所示：

TypeError: Cannot read property 'handleAjouter' of null 和 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

我刷新这个页面后，它就可以了。

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

我该如何解决？

Answer 1

解决此问题的最佳方法是添加以下代码：

history.pushState(null, document.title, location.href);

在做什么？它是在第一次加载后用一个值初始化历史记录，然后你不需要刷新。

就我而言，我是在开发 Android 应用程序时这样做的，并且有一些模式我想用后退按钮关闭以提供更原生的体验。

Answer 2

我修复它，添加：

<AjouterDisponibilite ref={(evt) => this.ModalAjout({evt})} start={this.state.startDisponibilite} end={this.state.endDisponibilite} date={this.state.dateDisponibilite}/>
<AjouterDisponibilite ref={(evt) => this.ModalAjoutb({evt})} />

方法 ModalAjout 必须有一个参数。

Answer 3

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

带有 ref prop 的组件在挂载时会将自己赋值给 prop 的值（或以自身作为参数调用函数），而带有 [=12] 的组件也会这样做=] 卸载时参考。

根据这些知识，您必须按如下方式更改 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;
    }
}

this.props.history.push 正在刷新后工作

this.props.history.push is working just after refresh

javascript

ref

reactjs

react-router-dom

react-ref