React - 在渲染之前获取数据（最佳解决方案）

Question

所以，我有一个应用程序，用户可以在其中选择多个设置。比如数字格式或默认显示的货币。

为此，我有一个特殊的 API 端点 /settings 从中获取值。

当用户重新加载页面时，整个应用程序在服务器端呈现。我尽快触发设置获取（在顶级组件的componentWillMount 中），但有时会出现闪烁/延迟。

可能的解决方案：

1. 第一个解决方案是在用户第一次加载应用程序时获取设置，并将其保存在localStorage（如果可用）中。缺点是第一次加载应用时，数字/货币仍可能与设置中的不同。

2. 第二种解决方案是在应用程序在服务器端呈现之前获取数据，并将此数据注入到脚本标记的某个位置（如window.userSettings = { ...settings }）。它可能会稍微延长重新加载加载时间，但设置将按照用户设置。

对于这样的问题还有其他解决方案吗？最好的方法是什么？

Answer 1

我希望，这个解决方案可以帮助你。

步骤 1：在 componentWillMount 中执行 API 调用并检查错误。为currencies 分配两个状态，为error 分配一个状态，如果可能，为loading 分配另一个状态 第 2 步：使用您在componnetDidMount 中的状态分配localStorage 第 3 步：然后，在您的渲染方法下，检查 error state 和 localStorage

下面给出的示例 sn-p

class App extends Component{

  custructor(props){
    super(props);
    this.state={
      currency_number: '',
      error: false
    }
  }

  componentWillMount(){
    //perform fetch api and assign the state with the received items
    // check for error, if so then setState({error: true})
  }

  ComponentDidMount(){
    localStorage.setItem('currency', JSON.stringify(this.state.currency_number))
  }

  render(){
    const currency =  JSON.parse(localStorage.getItem('currency'))
    if (this.state.error) {
      return(
        <div>
          { currency }
        </div>

      )
    }
  }
}