Question

我在utils中有一个函数可以执行此操作：

export function getUserRole() {
  return (
    localStorage.getItem('token') &&
    jwtDecode(localStorage.getItem('token')).role
  )
}

我在一个像这样的组件中调用它

class App extends Component {
  constructor(props) {
    this.role = getUserRole()
  }

  render() {
    console.log(this.role) //admin, member

    return (
      <Provider store={this.role === 'member' ? store : adminStore}>
        <BrowserRouter>
          <div className="App">
            <Switch>
              <Route path="/login" component={Login} />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
    )
  }
}

如何在此处切换商店？上面的代码工作但是首先加载adminStore然后加载存储（如果角色是成员）。如何防止将store和adminStore加载到我的应用程序中？

Answer 1

因为componentDidMount将在初始渲染后被调用，并且在第一次渲染期间将this.role未定义。

class App extends Component {
  componentDidMount() {
    this.role = getUserRole()
    console.log(this.role);   // you will see the correct value
  }

  render() {
    console.log(this.role) //undefined

    return (
      <div>Hello</div>
    )
  }
}

为什么使用componentWillMount方法？

因为在初始渲染之前调用该方法意味着在第一次触发渲染方法之前。

<强>解决方案：

您可以在构造函数中调用该方法，如下所示：

class App extends Component {
    constructor() {
       super()
       this.role = getUserRole()
    }
    .....
}

根据Doc：

componentDidMount（）在组件出现后立即调用   已安装（插入树中）。

在安装发生之前调用componentWillMount。它是   在render（）之前调用。

Answer 2

好吧，第一次渲染发生在组件安装和componentDidMount被调用之前，所以第一次渲染确实是未定义的。

你应该做的是添加一些逻辑来说：

render() { if (this.role === null) { // Render loading state ... } else { // Render real UI ... } }

查看here了解详情。

获取localstorage值并在redux中切换存储

2 个答案: