Question

所以，我有一个应用程序，用户可以选择几个设置。像数字格式或默认显示的货币。

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

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

可能的解决方案：

首先解决方案是在用户首次加载应用时获取设置，并将其保存在localStorage（如果可用）中。缺点是数字/货币仍然可能与第一次加载应用时的设置不同。
第二种解决方案是在服务器端呈现应用程序之前获取数据，并将此数据注入脚本标记（如window.userSettings = { ...settings }）。它可能会稍微延长重新加载加载时间，但设置将按用户设置它们。

这个问题还有其他解决办法吗？最好的方法是什么？

Answer 1

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

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

以下给出的示例摘录

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>

      )
    }
  }
}

Answer 2

我不知道这是否对您有所帮助，但您可以在获取数据时渲染其他内容，以便在出现延迟时让用户等待或避免闪烁效果。我正在使用我发现there

的加载器

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

2 个答案: