React跨组件state访问：Form用localStorage取Profile组件用户名

你这种跨组件读取本地存储的场景，根本不需要做状态提升。毕竟Profile组件已经把用户信息序列化存在localStorage里了，Form组件只要在初始化时解析对应字段就能拿到用户名，实现路径最短。

• 先修正易引发冲突的存储键名
  你现在存用户信息用的键名是document，这是浏览器环境下和原生Document对象绑定的特殊保留键名，部分浏览器会对这个键的读写做权限限制，很容易出现存了但读不出来的问题。建议把Profile组件里的存储键改成语义化的userProfile：

  // Profile组件的提交逻辑修改
  handleFormSubmit(e) {
    e.preventDefault()
    localStorage.setItem('userProfile', JSON.stringify(this.state))
    alert('Profile has been updated')
  }
  
  // 对应的componentDidMount里的读取逻辑同步修改
  componentDidMount() {
    this.documentData = JSON.parse(localStorage.getItem('userProfile'))
    if (this.documentData) {
      this.setState({
        name: this.documentData.name,
        phone: this.documentData.phone,
        email: this.documentData.email,
        address1: this.documentData.address1,
        address2: this.documentData.address2,
        addresscitystate: this.documentData.addresscitystate,
        addresszip: this.documentData.addresszip,
      })
    } else {
      // 原有空值重置逻辑保留即可
    }
  }
  

• 在Form组件中读取用户name
  在Form组件里新增一个本地state存用户名，在组件初始化的useEffect生命周期里从localStorage读取之前存的用户信息，解析出name字段赋值给state：

  // Form组件的state声明区新增
  const [userName, setUserName] = useState('')
  
  // 修改原有的空依赖useEffect
  useEffect(() => {
    // 读取用户资料，加空值容错避免解析报错
    const savedProfile = JSON.parse(localStorage.getItem('userProfile')) || {}
    setUserName(savedProfile.name || '')
  
    // 保留你原有的初始化逻辑
    getBalance()
    localStorage.setItem('list', JSON.stringify(list))
    localStorage.setItem('income', JSON.stringify(income))
    localStorage.setItem('expense', JSON.stringify(expense))
  }, [])
  

• 替换硬编码的欢迎文案
  把原来写死的Hello User部分替换成动态的state值：

  <div className='totals'>
    <h2 className='balance'> Hello {userName || 'Guest'}, Your Current Balance </h2>
    <h3> ${balance} </h3>
  </div>
  

• 给收支值加空值兜底：现在你初始化income和expense的时候，如果本地存储里没有对应数据，解析出来的值是null，后面做金额累加的时候会直接算出NaN，需要加默认值：

  const [income, setIncome] = useState(
    JSON.parse(localStorage.getItem('income')) || 0
  )
  const [expense, setExpense] = useState(JSON.parse(localStorage.getItem('expense')) || 0)
  

• 清缓存逻辑不要全量清空：现在clearBudget方法直接调用localStorage.clear()会把Profile存的用户资料也一起删掉，建议只删除和预算相关的存储键：

  const clearBudget = () => {
    localStorage.removeItem('list')
    localStorage.removeItem('income')
    localStorage.removeItem('expense')
    alert('Balance has been cleared, Please Refresh Page')
  }
  

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