Question

我已经在这里和其他论坛中搜索了此问题，但是我发现的解决方案非常针对当前的问题。

我有两个小功能，它们既可以控制React Bootstrap模式的可见性，又可以帮助向其传递一些参数。

这是两个功能：

modalVisibility = ({ handleShow }) => {
  this.showModal = handleShow;
};

openArticle = data => {
  console.log(data.title);
  this.setState(
    {
      title: data.title,
      content: data.fullArticle        },
    () => {
      this.showModal();
    }
  );
};

这是他们触发的模式部分：

<Modal ref={this.modalVisibility} title={this.state.title} article={this.state.content}></Modal>

按钮触发：

<button onClick={() => this.modalVisibility(data)}>

以上所有方法（大部分）都可以。

当我想离开该组件并通过导航栏菜单转到另一个组件时（使用react-router-dom），问题就来了。每当我切换到另一页时，就会出现上述错误：

TypeError：无法解构“对象空”的属性“ handleShow”，因为它为空

，直到我刷新页面后才会离开。然后，当我回到托管Modal的页面并再次切换回其他页面时，它再次出现。

Answer 1

将modalVisibility函数重写为以下内容，以便您可以放置一个断点并检查为什么要调用modalVisibility。

modalVisibility = (obj) => { 
   this.showModal = obj && obj.handleShow 
}

TypeError：无法解构“ object null”的属性“ handleShow”，因为它为空

1 个答案: