javascript - React App 错误：无法将属性“innerText”设置为 null

Question

这个 React 应用程序按预期呈现和工作，但是一旦我单击其中一个按钮，它就会为代码的第 78 行记录错误“TypeError: Cannot set property 'innerText' of null”，即这一行：

display.querySelector('h1').innerText = `${id} is playing`;

在 playSound 函数中：

    this.audio.current.play();
    
    const id = this.audio.current.id;

    const parent = this.audio.current.parentNode;
    parent.classList.add('active');

    const display = parent.parentNode;
    display.querySelector('h1').innerText = `${id} is playing`;
  }

所以我对正在发生的事情的猜测是，在这种情况下被识别为“null”的是字符串h1，所以我尝试更改字符串之间的内容，以便我可以根据它的出现方式以不同的方式识别它的代码，<h1>但它仍然记录相同的错误。除非我不在基地并且它不是针对h1的，但是display？我不确定。我还在<div id="app" class="container"></div>html 中将我的脚本标记放在上面，所以我不认为是这样（我看到它是作为快速修复提供的）。

这是jsFiddle中的代码

就null而言，我是否正确阅读了错误？

预期结果：在 Display 上显示第 78 行中包含的文本，直到单击其中一个按钮为止。

任何帮助将不胜感激，谢谢。

标签： javascripthtmlreactjs