javascript - 尝试将数据从 firebase 写入 header 元素时，无法设置 null 的属性 'innerText'

Question

React 新手，收到此错误:

Uncaught TypeError: Cannot set property 'innerText' of null

尝试将数据从 firebase 写入 header 时。

export default function Deposits() {
 const classes = useStyles();

 const preName = document.getElementById("userNm");

 const dbRefObject = firebase.database().ref().child('Users');
 const dbNameObject = dbRefObject.child('name');

 dbRefObject.on('value', snap=> {preName.innerText = 
 JSON.stringify(snap.val(), null)});
 dbNameObject.on('child_added', snap => console.log(snap.val()));



 return (
   <React.Fragment>
    <h2 id="userNm"> </h2>
    <Typography id="number"  variant="h4"style={{textAlign: "center",}}>
     NUMBER HERE
    </Typography>
    <Typography id="grade" className={classes.depositContext} style= 
      {{textAlign: "center",}}>
       GRADE HERE
    </Typography>

</React.Fragment>
);
}

希望我的 firebase 数据库中“名称”下的名称显示为标题，但它是空白的。

Answer 1

在 React 中，您不能简单地使用 getElementById 访问元素。您需要使用 React.createRef()。

const preName = React.createRef();
const dbNameObject = dbRefObject.child('name');
dbRefObject.on('value', snap=> {preName.current.innerText = JSON.stringify(snap.val(), null)});

return (
  ...
  <h2 ref={preName}> </h2>
  ...
)

但我建议你使用 state 而不是 Ref.