TypeError：无法解构'object null'的属性'handleShow'，因为它是null答案

【问题标题】：TypeError: Cannot destructure property 'handleShow' of 'object null' as it is nullTypeError：无法解构'object null'的属性'handleShow'，因为它是null
【发布时间】：2020-02-26 13:14:54
【问题描述】：

我已经在此处和其他论坛中搜索过这个问题，但我找到的解决方案非常针对手头的问题。

我有两个小函数，它们都控制 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：无法解构“object null”的属性“handleShow”，因为它是 null

在我刷新页面之前不会离开。然后在我返回到托管 Modal 的页面并再次切换回任何其他页面后，它再次出现。

【问题讨论】：

modalVisibility 混淆了它的调用方法或 ref 对元素的引用。
它应该是模态框在需要时显示/隐藏的参考。
您可以尝试向模态框添加不同的 ref 吗？
@ArpithaChandrashekara 试过了，没有变化。
将 modalVisibility 函数重写为modalVisibility = (obj) => { this.showModal = obj.handleShow }，这样您就可以设置断点并检查调用 modalVisibility 的原因。

标签： javascript reactjs react-bootstrap

【解决方案1】：

将 modalVisibility 函数重写到下面，这样您就可以放置一个断点并检查为什么调用 modalVisibility。

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

【讨论】：