6

我是新手，我正在使用所有类组件。这是我的后坐力状态

export const tokenState = atom({
  key: "tokenState",
  default: "",
});

如何在类组件中使用反冲并设置令牌？我RecoilRoot在应用程序中使用过

<RecoilRoot>
  <Header />
  <Main />
</RecoilRoot>

在login.js中，我想在recoil中设置token，但login.js它是一个类组件。

const res = await APIS.login(apiRoute,requestObject);

在res.data.token我得到 jwt 令牌。

先感谢您！

4

2 回答 2

7

Recoil.JS 旨在与反应钩子一起使用，我认为它们不提供除钩子之外的任何其他功能。如果您无法将 Login.js 更改为功能组件，请尝试使用包装功能组件，将令牌作为道具传递给 login.js 组件。

我建议useRecoilState(myAtom)。

function LoginWrapper(props) {
    const [token, setToken] = useRecoilState(myAtom);

    useEffect(() => {
      async function get() {
         const { data: { token: jwt } } = await APIS.login(apiRoute,requestObject);

         setToken(jwt);
      }

      get();
    }, []);

    return <LoginComponent {...props} jwt={token} />
}
于 2020-07-12T14:35:49.823 回答
5

正如@Matt 所说，您必须将您的类组件包装成一个功能性组件，将 Recoil API 作为道具传递。

无论如何，如果你想从你的Login组件中设置原子的令牌，你可以简单地包装Login到一个传递结果的组件中useSetRecoilState

const LoginWrapper = () => {
  const setToken = useSetRecoilState(tokenState);
  return <Login setToken={setToken} />;
};

在更复杂的情况下，您可以利用 Recoil' useRecoilCallback，它允许您一次使用整个 Recoil API

const LoginWrapper = () => {
  const setToken = useRecoilCallback(({ set }) => token => {
    set(tokenState, token);
  });

  return <Login setToken={setToken} />;
};

setRecoilState请注意： using和using之间的主要区别在于setRecoilCallbackusingsetRecoilState自动订阅消费组件到 atom 更改，而setRecoilCallback不会订阅它，因此您可以避免一些渲染。

您可以在这个工作的 CodeSandbox中找到这两种解决方案。正如您所看到的PrintToken，一旦Login组件更新令牌，组件就会正确重新渲染。

如果您需要更多帮助，请告诉我

于 2020-07-17T07:32:58.817 回答