React封装localStorage自定义Hook后输入框无法输入问题

云原生阿岚

2026-8-28

问题根因

两个核心逻辑错误共同导致输入框失效：

自定义Hook中localStorage取值判断逻辑错误：localStorage.getItem(key) 在key不存在时返回null而非空字符串''，原有判断storedValues !== ''在首次加载无存储数据时，会对null执行JSON.parse(null)得到null作为初始状态值。
Hook调用时传入的默认值类型不匹配：预期初始状态为{name: ''}结构的对象，实际传入空字符串''，访问字符串/null值的.name属性会得到undefined，输入框绑定的value为undefined时，React会出现受控/非受控组件状态切换冲突，直接导致输入框无法响应键入、光标样式异常。

修复方案

1. 修正自定义Hook逻辑

补充空值判断和JSON解析异常捕获，避免非法值导致状态异常：

import { useState, useEffect } from 'react';

const useStateWithLocalStorage = (defaultValue, key) => {
  const [value, setValue] = useState(() => {
    const storedValues = localStorage.getItem(key);
    // 无存储值时直接返回默认值
    if (storedValues === null) {
      return defaultValue;
    }
    // 捕获JSON解析异常，避免脏数据导致页面崩溃
    try {
      return JSON.parse(storedValues);
    } catch (err) {
      console.error(`解析localStorage键[${key}]失败:`, err);
      return defaultValue;
    }
  });

  useEffect(() => {
    // 过滤null/undefined值，避免写入无效存储
    if (value != null) {
      localStorage.setItem(key, JSON.stringify(value));
    }
  }, [key, value]);

  return [value, setValue];
};

export default useStateWithLocalStorage;

2. 修正Hook调用入参

传入和业务逻辑匹配的对象类型默认值，替换原有空字符串：

// 错误写法
// const [inputValue, setInputValue] = useStateWithLocalStorage('', 'form');
// 修正写法
const [inputValue, setInputValue] = useStateWithLocalStorage({ name: '' }, 'form');