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

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

我有一个对话框（AjouterDisponibilite），我用组件议程上的ref来调用它

日历图标有一个我尝试的

onClick

事件：

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

但当我运行它并单击图标时，URL指向正确，但我得到一个

错误

，如下所示：

TypeError:无法读取null的属性“handleJouter”

和

无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务

在我刷新这个页面之后，它就可以工作了

我的代码是：

---

我怎样才能修好它

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

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

你在干什么？在第一次加载历史记录后，它将使用一个值初始化历史记录，这样您就不需要进行刷新

在我的例子中，我是在开发Android应用程序时这样做的，我想用back按钮关闭一些modals，以提供更自然的体验。

我通过添加：

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

this.ModalAjout（{evt}）start={this.state.startDisponibilite}end={this.state.endDisponibilite}date={this.state.dateDisponibilite}/>
this.ModalAjoutb（{evt}}/>

---

方法

ModalAjout

必须有一个参数。

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

带有

ref

prop的组件在安装时会将其自身分配给prop的值（或将函数本身作为参数调用），在卸载时，它们也会对

null

引用执行相同的操作

有了这些知识，您必须按如下方式更改

议程

组件的代码：

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

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

---

道具在反应中是不变的。不要那样改变它们。如果您想保留数据以便在组件中使用，请使用state，当然也可以从父级传递。@rrd我如何修复它？你能检查一下我的沙箱吗？在这种情况下，变异道具不是问题

this.props.history

指向react-router历史对象，调用

push

是使用react-router重定向的推荐方法之一。更多详细信息：哪个文件/行抛出错误？该错误表示您试图更新未安装组件的状态。首先，这不是路由问题。尚未使用

ref

。您可以改进指向

ref

问题的问题。：-）我用

this.ModalAjout（{evt}）}/>
调用他的组件？我试过了，但不起作用，你能检查一下吗？不，你不调用它，你只需像以前一样将它传递给prop
ref={this.ModalAjout}
。你能检查一下我的沙箱吗？我尝试了你的说法，但它不起作用。你现在出现的错误是由于
aJournerDisponibilite
组件中未定义状态变量，与这里提出的问题无关。但因为它是一个快速的解决方案：
tranchesC
在您所在的州没有定义。您应该将
onClick={this.ajoutb}
更改为
onClick={（）=>this.ajoutb（）}