Question

如何解决此错误 ---> TypeError: 无法读取 null 的属性“id”

2021-05-06

1115

reactjs

我正在开发一个 React 项目，遇到了一些语法错误，例如 TypeError：无法读取 null 的属性“id”。据我所知，我的代码没问题，但我不知道为什么会出现此错误，所以请有人帮助我解决此错误

这是我的代码

import React, { useEffect, useRef } from 'react';
import './App.css';

const App = () => {
const initialMessage = useRef(null)

  

  const initialMsg = initialMessage.current.id

  console.log(initialMsg, 'One')



  return (
    <>
      <div id="screen-initial">
        <h1 id="msg" ref={initialMessage}>Loading...</h1>
        <progress id="load-progress" value="0" max="100"></progress>
      </div>

      <div id="screen-start" class="hidden">
        <a href="#" id="start-scan">Start scan</a>
      </div>

      <div id="screen-scanning" class="hidden">
        <video id="camera-feed" playsinline></video>
        <canvas id="camera-feedback"></canvas>
        <p id="camera-guides">
          Point the camera towards front side of a document.
  </p>
      </div>
    </>
  )
}



export default App

Answer 1

因为

  const initialMsg = initialMessage.current.id

在组件挂载之前运行
因此您可能希望在组件挂载之后运行它。

您可以使用 useEffect 来实现这一点

Answer 2

在初始渲染之前，intialMessageis ref 未定义。

您可以通过将其放入 useEffect 中来修复它，因为它仅在第一次渲染后运行：

import React, { useEffect, useRef } from 'react';
import './App.css';

const App = () => {
const initialMessage = useRef(null)


// Use it inside useffect  
React.useEffect(()=>{
  const initialMsg = initialMessage?.current?.id //<== HERE

  console.log(initialMsg, 'One')

},[])



  return (
    <>
      <div id="screen-initial">
        <h1 id="msg" ref={initialMessage}>Loading...</h1>
        <progress id="load-progress" value="0" max="100"></progress>
      </div>

      <div id="screen-start" class="hidden">
        <a href="#" id="start-scan">Start scan</a>
      </div>

      <div id="screen-scanning" class="hidden">
        <video id="camera-feed" playsinline></video>
        <canvas id="camera-feedback"></canvas>
        <p id="camera-guides">
          Point the camera towards front side of a document.
  </p>
      </div>
    </>
  )
}



export default App