使用React hooks时如何用localStorage值填充state对象的键值对？

问题原因 #

• setUserData是异步更新API，调用后立刻打印userData拿到的是更新前的旧值，不是状态没有更新，是打印时机不对
• 你直接在组件顶层调用setUserData会触发无限重渲染：组件渲染时调用setState会触发重新渲染，重新渲染又会再次执行顶层代码调用setState，陷入死循环
• localStorage.getItem拿不到对应key时会返回null，直接赋值给state可能导致后续渲染异常，需要做空值兼容

修正代码 #

将读取localStorage和更新state的逻辑放到useEffect中，仅在组件首次挂载时执行一次：

import { useState, useEffect } from 'react';

const [userData, setUserData] = useState({
    'email': '',
    'name': '',
    'photoUrl': '',
    'likes': 1,
    'UserID': ''
});

useEffect(() => {
    const email = localStorage.getItem('email') || '';
    const name = localStorage.getItem('name') || '';
    const getImg = localStorage.getItem("img") || '';
    const userId = localStorage.getItem('UserID') || '';

    setUserData({
        'email': email,
        'name': name,
        'photoUrl': getImg,
        'likes': 1,
        'UserID': userId
    });
}, []); // 空依赖数组保证逻辑仅执行一次

// 监听state变化验证更新结果
useEffect(() => {
    console.log('更新后的userData：', userData);
}, [userData]);

你也可以直接在state初始化时读取localStorage赋值，代码更简洁：

const [userData, setUserData] = useState({
    'email': localStorage.getItem('email') || '',
    'name': localStorage.getItem('name') || '',
    'photoUrl': localStorage.getItem('img') || '',
    'likes': 1,
    'UserID': localStorage.getItem('UserID') || ''
});

优化方案 #

• 封装通用的localStorage读取工具函数，减少重复的空值处理代码：

const getLocalStorage = (key, defaultValue = '') => {
  const value = localStorage.getItem(key);
  return value ?? defaultValue;
}

// 初始化state时直接调用即可
const [userData, setUserData] = useState({
    'email': getLocalStorage('email'),
    'name': getLocalStorage('name'),
    'photoUrl': getLocalStorage('img'),
    'likes': 1,
    'UserID': getLocalStorage('UserID')
});

• 如果需要localStorage和state双向同步，可以自定义useLocalStorage Hook，统一处理读写逻辑，避免重复写取值/存值代码
• 所有副作用操作（读取存储、请求接口、修改state等）不要直接写在组件顶层，统一放到useEffect或者事件回调中执行

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