部署网站时出现Cannot read properties of null (reading '0')错误求助

问题根源 #

部署环境里user变量的值是null或者无效的JSON字符串，导致JSON.parse(user)返回null，之后访问[0]就触发了Cannot read properties of null (reading '0')错误。本地运行正常是因为本地环境中user的初始值符合解析要求。

具体修复方案 #

• 先校验再解析，结合异常捕获
  用useState的函数初始化形式，既避免重复解析，又能处理各种异常情况：

  const [Rank, setRank] = useState(() => {
    // 先判断user是否存在
    if (!user) return null;
    try {
      const parsedData = JSON.parse(user);
      // 链式可选链+默认值，确保每一步都安全
      return parsedData?.[0]?.Rank ?? null;
    } catch (err) {
      console.error('解析user数据失败:', err);
      return null;
    }
  });
  

• 确保user的初始值合法
  检查user的来源（比如localStorage、接口返回）：

  • 如果是从localStorage获取，部署时可能存储为空，直接给兜底值：const user = localStorage.getItem('user') || '[]';
  • 如果是接口传入的props，确保组件初始化时已有有效数据，或者设置默认空数组字符串：const user = props.user || '[]';

• 简洁兜底写法（适合确定user是合法JSON的场景）
  直接在初始化时添加多层兜底，避免某一层为null：

  const [Rank, setRank] = useState(
    JSON.parse(user || '[]')?.[0]?.Rank ?? null
  );
  

  注意：如果user是无效JSON，这种写法会抛出错误，所以更推荐带try-catch的方案。

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