使用RecoilJS通过API发布数据

Question

在RecoilJS文档中，有一个示例如何处理异步数据查询，但它只涉及get数据。

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

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中处理该过程

Answer 1

您只需处理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>
  );
}