Next.js/React从Local Storage取数首次渲染报错求助

问题原因 #

组件首次渲染时，category的初始值是空数组[]，此时category[current]是undefined，访问它的.image属性自然会报错。而useEffect是在组件挂载完成后才执行的，所以第一次渲染还没来得及从Local Storage加载数据更新状态。

三种解决方法 #

方法1：初始状态直接从Local Storage读取

不用等到useEffect执行，直接在useState初始化时就从Local Storage取数据，这样组件第一次渲染时category就有值了：

// 初始化时直接获取Local Storage数据，没有数据则用空数组兜底
const initialCategory = JSON.parse(localStorage.getItem("action")) || [];
const [category, setCategory] = useState(initialCategory);

// 若需要监听Local Storage后续变化，可保留useEffect；不需要则直接删除
useEffect(() => {
    const getItems = localStorage.getItem("action");
    if (getItems) {
      const actionFavorites = JSON.parse(getItems);
      setCategory(actionFavorites);
    }
}, []);

方法2：条件渲染，等数据加载完成再渲染图片

在渲染Image组件前，先判断category[current]是否存在，避免访问不存在的属性：

<Wrapper>
  <Navbar link="/" logo="Retour" />
  <div className="container">
    <div className="imgContainer">
      {/* 确认数据存在后再渲染图片 */}
      {category[current] && (
        <Image
          src={category[current].image}
          alt="main image"
          layout="fill"
          objectFit="contain"
        />
      )}
      {/* 可选：添加加载提示 */}
      {!category[current] && <div>加载中...</div>}
    </div>
  </div>
</Wrapper>

方法3：使用可选链操作符（?.）避免报错

ES6+的可选链操作符会自动判断前面的值是否为undefined或null，如果是就返回undefined，不会触发报错：

<Wrapper>
  <Navbar link="/" logo="Retour" />
  <div className="container">
    <div className="imgContainer">
      <Image
        src={category[current]?.image}
        alt="main image"
        layout="fill"
        objectFit="contain"
      />
    </div>
  </div>
</Wrapper>

注意：如果category[current]?.image返回undefined，Image组件的src会是空值，可能显示默认占位图，可根据需求调整兜底逻辑。

内容的提问来源于stack exchange，提问作者seiya0122t