React中如何正确定义useEffect内变量并解决localStorage未定义问题

问题根源 #

1. 服务端渲染（SSR）环境下不存在window对象，直接访问localStorage会抛出「localStorage is not defined」错误。
2. 你在useEffect内部定义的firstname是局部变量，作用域仅限该回调函数内，组件其他位置无法访问，因此出现「cannot find name firstname」提示。

正确实现方式 #

使用React的useState存储firstname的值，通过useEffect在客户端环境下读取localStorage并更新状态：

import { useState, useEffect } from 'react';

// 组件内部逻辑
const [firstname, setFirstname] = useState('');

useEffect(() => {
  // 仅在客户端环境执行代码
  if (typeof window !== "undefined") {
    // 读取localStorage，无值则设为空字符串
    const storedFirstName = localStorage.getItem("firstName") || '';
    setFirstname(storedFirstName);
  }
}, []);

// 在iframe中使用全局可访问的状态变量
<IframeWrapper src={`${BASE_URL}${formId}?first_name=${firstname}`} />

关键说明 #

• useState定义的状态变量firstname在组件全局可访问，彻底解决作用域问题。
• useEffect的空依赖数组确保代码仅在组件挂载时执行一次，且仅在客户端运行（服务端不会执行useEffect）。
• 初始化状态为空字符串，避免组件首次渲染时firstname为undefined，保证URL参数的合法性。

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