javascript - 如何为每个组件提供一个值？

Question

我对 React Native 有点陌生。

我正在尝试为每个组件添加一个值，主要是登录信息。

我正在使用这个库:

https://github.com/mahomahoxd/react-native-login-keycloak

您可以通过这种方式获取登录信息:

import Login from 'react-native-login-keycloak';


const gatheredTokens = await Login.getTokens();

现在很明显，await 需要在异步函数中，所以我尝试如下:

async componentWillMount() {
    const gatheredTokens = await Login.getTokens();
    this.setState({ gatheredTokens: this.state.gatheredTokens });
}

然而，这看起来很困惑 - 首先，componentWillMount 显然已被弃用(我想我可以将其切换为 componentDidMount)并且它还要求我在每个组件中基本上重复这个过程。乱码重复!

执行此操作的更纯粹的方法是什么？我在猜测一些与高阶组件或其他结构类似的东西？

谁能给我一个例子，说明我如何将此提供给我的所有组件(我使用的是 Redux，所以通过 Redux 或其他方法都可以)——我只是不确定如何确保数据是正确的处理并在需要的任何地方可用，我想要最“React”的方式来做这件事。

Answer 1

有多种方法可以做到这一点，渲染 Prop ，高阶组件，甚至 Hook - 不确定在我写这个 Hook 时 React Native 是否支持。

无论如何，既然你建议使用高阶组件，那么我的解决方案将使用一个

export const withGatheredTokens = Component => {
  class WithGatheredTokens extends React.Component {
    state = { gatheredTokens: null };

    async componentDidMount() {
        const gatheredTokens = await Login.getTokens();
        this.setState({ gatheredTokens });
    }

    render() {
      return (
        <Component gatheredTokens={this.state.gatheredTokens} {...props} />
      );
    }
  }

  return WithGatheredTokens;
};

// And this is how you use with with a Another Component
export AnotherComponent =  withGatheredTokens(AnotherComponentBase)

无论如何，网络请求应该始终在 ComponendDidUpdate 而不是 componentWillMount 方法中完成。