为什么React组件中localStorage的值仅在页面重载后才会显示？

问题根因 #

1. getPerson 发起的是异步API请求，组件首次渲染时请求还未完成，localStorage 中还没有对应存储的字段值
2. localStorage 本身的更新不会触发React组件的重渲染，只有组件的state、props发生变化时才会触发重渲染，因此请求完成存储localStorage后，组件不会自动更新读取最新值，只有刷新页面重新走全量渲染流程时，才会读取到已存储的localStorage值。

可行解决方案 #

方案1（最推荐，符合React数据流规范）：将需要渲染的用户数据存入组件state #

修改getPerson逻辑，请求成功后返回完整的用户数据，在组件中请求回调里更新state，触发自动重渲染：

// 组件内修改componentDidMount逻辑
componentDidMount(){
  this.props.getPerson(1, this.props.history)
    .then(userData => {
      // 请求成功后将需要渲染的字段存入组件state
      this.setState({
        abn: userData.abn,
        urole: userData.urole,
        address_business: userData.address_business,
        phone_number: userData.phone_number
      })
    })
}

渲染时直接读取state值即可：

<p>Hello {this.state.abn}</p>
<p>Hello {this.state.urole}</p>
<p>Hello {this.state.address_business}</p>
<p>Hello {this.state.phone_number}</p>

方案2（适用跨组件共享用户数据场景）：通过状态管理库托管用户数据 #

如果你使用了Redux、MobX这类状态管理工具，可以将请求获取的用户信息存在全局store中，Profile组件通过props关联store中的用户数据，store更新时会自动触发组件重渲染，无需依赖localStorage做渲染数据来源。

临时兼容方案（不推荐，不符合React最佳实践）：请求完成后强制重渲染 #

如果暂时无法修改现有逻辑，可以在getPerson请求完成的回调中调用this.forceUpdate()强制组件重渲染，重渲染时会读取最新的localStorage值。

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