为什么我在ReactJS中通过get Item将元素的innerHTML设置为某个本地存储值时出现错误？

Question

实际上我正在尝试将

元素innerHTML设置为本地存储中的某个值，它第一次显示该值，但每当我尝试重新加载页面时，它都会显示错误，如下面的屏幕截图！

这是代码-

const getName = window.localStorage.getItem("name");

   if(getName.charAt(0) == "M"){
  document.getElementById("myidname").innerHTML = "some message";

   }else{
console.log("error")
   }

<p id='myidname'></p>

我尝试将语句包装到一个方法中，然后在

元素内使用该方法，但仍然显示相同的错误。

Answer 1

您遇到的错误可能源于在组件完全安装之前尝试直接在 React 中操作 DOM，这可能导致访问尚不存在的元素。此外，当您重新加载页面时，如果 localStorage 项“name”未设置或为空，则尝试在 null 或 undefined 上调用 .charAt(0) 将引发错误。

React 建议采用更具声明性的 DOM 操作方法，支持状态和 props 而不是直接操作。为了在遵循 React 最佳实践的同时实现您的目标，您可以使用组件状态和 useEffect 挂钩从 localStorage 读取并根据该值有条件地渲染内容。

这是一种修改后的方法，可以避免直接 DOM 操作和错误：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [nameMessage, setNameMessage] = useState('');

  useEffect(() => {
    const getName = window.localStorage.getItem("name");

    // Check if getName is not null or undefined before attempting to access it
    if (getName && getName.charAt(0) === "M") {
      setNameMessage("some message");
    } else {
      console.log("error or name does not start with M");
    }
  }, []); // Empty dependency array means this effect runs once on mount

  return (
    <p id='myidname'>{nameMessage}</p>
  );
}

export default MyComponent;