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

如何解决新手问题：如何在带有React和Apollo客户端的简单表单处理程序中适当地分解代码

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

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

SignUp（）组件按状态管理对象fields中的表单字段。 SignUp（）表单中的onSubmit事件调用handleSubmit（），然后调用e.preventdefault，然后调用 non-rfc 函数handleSignUp（fields），我已将该函数传递给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}
...
}

解决方法

查看钩子的第一条规则-only call hooks at the top level

将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

如果由于问题中未明确说明的原因需要将其提升到def games_query(): games_list = [] for row in Game.query: games_list.append(row.__dict__['title']) print(row.__dict__['title']) return games_list ，您也可以这样做。

,

我的第一选择是使用larz解决方案，它将send保留在handSignUp组件中的SignUp作为SignUp组件处理单个操作的任务。但是仍然需要保留handleSignUp外部组件，则需要将apollo客户端作为独立的应用程序使用，而不需要使用钩子。

apolloClient
     .mutate({
        mutation: MUTATION
     })
  .then (res => {})
  .catch(err => {})