reactjs - react 引用 : Uncaught TypeError: Cannot set property 'innerHTML' of null

Question

我的构造函数中有这些引用

constructor(props) {
    super(props);

    //All Refs
    this.sunglassesTintsTab = React.createRef();
    this.gradientTintsTab = React.createRef();
    this.fashionTintsTab = React.createRef();
    this.lensTintStandardSwatchesContainer = React.createRef();
    this.lensTintMirrorSwatchesContainer = React.createRef();
}

这是我的 componentDidMount

  componentDidMount() {
    console.log('ComponentDidMount Start');
    if (this.state.modalType === 'lensTintsBlokz') {
      this.getLensTintSwatches('blokz');
    } else {
      this.setState({ lensTintsTabsContainerHidden: false });
      this.getLensTintSwatches('sunglasses');
    }
  }

在 getLensTintSwatches 函数中 - 这是在 componentDidMount 中调用的

this.lensTintStandardSwatchesContainer.current.innerHTML = '';
this.lensTintMirrorSwatchesContainer.current.innerHTML = '';

我收到以下错误。

未捕获的 TypeError:无法设置 null 的属性“innerHTML”

我已经尝试了标准的 React.createRef() 和回调样式 ref，但所有 ref 的当前值都返回 null。我在这里做错了什么？

UPDATE: I'm passing ref={this.xyxRef} as prop in the respectiveelements.

Another observation- The console.log in componentDidMount is nottriggered, based on other console errors

这是流程:

Constructor -> Render -> Constructor -> Render -> This ERROR

Answer 1

您收到错误的最可能原因是您的引用未附加到 DOM 元素。如果您不尝试将这些 refs 附加到 DOM 元素，则意味着您没有设置 refs 的初始值。无论哪种方式，错误都表明您的 refs 的值不知何故为 null。因此，您可以:

• 将您的 refs 传递到 html 元素(例如 <div ref={myRef} /> )，然后 React 将自动设置您的 refs .current属性到相应的 DOM 节点。
• 给你的推荐人一个初始值。 (据我所知，您无法使用 createRef 为 refs 赋予初始值。您可能需要将您的组件转换为功能组件，然后您可以使用 useRef 钩子(Hook)为您的 refs 赋予初始值.)

要了解有关 refs 的更多信息，我建议您阅读 React's official documentation about refs .