时间戳

首页 > 解决方案 > 新手问题：如何在带有 React 和 Apollo 客户端的简单表单处理程序中正确分解代码

reactjs - 新手问题：如何在带有 React 和 Apollo 客户端的简单表单处理程序中正确分解代码

问题描述

问题：关于下面描述的 React+ApolloClient 表单处理，任何人都可以告诉我处理这种情况的“正确”方法或指向一个好的教程。即使在这种简单的情况下，代码的模块化和组织也让我感到困惑。

代码详细信息：我有一个带有子功能组件 SignUp(props) 的 react App() 组件，它呈现注册页面和表单。（我坚持只对功能组件 RFC 和钩子做出反应 - 没有类组件 - 以避免不知所措）

fieldsSignUp() 组件根据其状态管理对象中的表单字段。SignUp() 表单中的 onSubmit 事件调用 handleSubmit()，然后调用 e.preventdefault，然后调用非 rfc函数 handleSignUp(fields)，我已在其 props 上将其传递给 Login()。

我能够成功地将表单数据提升到父 App()。

从那里，我希望使用 useMutation() 在我的 graphql 服务器上创建一个新用户。但是，我不能调用 useMutation() 因为 handleSignUp 不是反应功能组件。

什么是正确的设计模式？我应该在 SignUp() 组件中运行突变吗？

非常感谢

// ----- App.js:
function handleSignUp(fields) {
  console.log("App SignUp data:", fields);
  //const [signup, { data }] = useMutation(SIGN_UP);  
  // !! CANNOT USE HOOK IN A NON-RFC FUNCTION
}

function App() {
...
        <Route path="/SignUp">
          <SignUp onSignUp={handleSignUp} />
        </Route>
...


// ----- SignUp.js:
function SignUp(props) {
  const [fields, setFields] = useState({
    email: "",
    password: "",
    organization: "",
  });
...
  function handleSubmit(e) {
    e.preventDefault();
    props.onSignUp(fields);
  }
 return (
...
    <div id="sign-up-page">
      <h1>Sign Up</h1>
      <form
        className="sign-up-form"
        noValidate
        autoComplete="off"
        onSubmit={handleSubmit}
...
}

标签： reactjsformsapollo-client

解决方案

查看 hooks 的第一条规则——只在顶层调用 hooks

更改SignUp为箭头函数组件，然后在内部Signup使用useMutation钩子，然后在下面定义您的handleSignUp函数 -

const SignUp = () => {
  const [signup, { data }] = useMutation(SIGN_UP);
  const [fields, setFields] = useState({
    email: "",
    password: "",
    organization: "",
  });

  const handleSubmit(e) {
    e.preventDefault();
    signup(fields);
    // or possibly something like this to pass your fields as variables properly
    // signup({ variables: { ...fields } });
  }
  
  return (
    ...
  );
}

如果您App出于某种原因在您的问题中没有明确说明，您也可以这样做。

推荐阅读