使用RecoilJS通过API发布数据

debugcn 发表于 Dev

三藩

在RecoilJS文档中，有一个如何处理异步数据查询的示例，但这仅与获取数据有关。

假设我有一个简单的状态：

const accountState = atom({
  key: "accountState",
  default: {
    id: "",
    name: "",
  }
});

还有一个组件是注册表：

const RegisterForm = () => {
  return (
    <form>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  )
}

发布的数据在中FormData。成功创建新帐户后，服务器将发送包含id和name的响应。

{
  "id": "abcdef123456",
  "name": "example"
}

此响应数据将设置为的新状态accountState。

我该如何处理RecoilJS？

Ewe Tek Min

您可以只处理http请求，并将响应设置为状态。

const RegisterForm = () => {
  const [account, setAccount] = useRecoilState(accountState);

  const handleSubmit = async e => {
    e.preventDefault();

    const response = await fetch(url, {
      method: 'POST',
      body: data,
    });

    const responseJson = await response.json();
    setAccount(responseJson);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  );
}

编辑

为了有一种可重用的方法，我建议您构建自定义的钩子，以便经常使用

const useRegister = () => {
  const setAccount = useSetRecoilState(accountState);

  const register = useCallback(async (username)=> {
    const response = await fetch(url, {
      method: 'POST',
      body: { username },
    });

    const responseJson = await response.json();
    setAccount(responseJson);
  }, [setAccount]);

  return register;

}

const RegisterForm = () => {
  const register = useRegister();

  const handleSubmit = async e => {
    e.preventDefault();

    await register(username);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。