无法以提交回调或Shopify Polaris React组件的形式获取更新的值

Question

问题摘要嗨，团队，我是Polaris的新手，并尝试使用以下代码创建React Signup表单

import React, { useCallback, useState } from "react";
import {
  Button,
  Form,
  FormLayout,
  Layout,
  Checkbox,
  Card,
  Page,
  TextField,
} from "@shopify/polaris";

export const SignIn = () => {
  const [textFieldValue, setTextFieldValue] = useState("Mark");
  const [newsletter, setNewsletter] = useState(false);
  const [email, setEmail] = useState("[email protected]");
  const [password, setPassword] = useState("password");
  const [loading, setLoading] = useState(false);

  const handleNewsLetterChange = useCallback(
    (value) => setNewsletter(value),
    []
  );
  const handleEmailChange = useCallback((value) =>{setEmail(value)}, [email]);
  const handlePasswordChange = useCallback((value) => setPassword(value), [password]);
  const handleTextFieldChange = useCallback(
    (value) => setTextFieldValue(value),
    [textFieldValue]
  );
  const handleSubmit = useCallback((_event) => {
    // setLoading(true);

    console.log(textFieldValue,newsletter,email, password  )
  }, []);
  const signupForm = (
    <Form onSubmit={handleSubmit} preventDefault={true}>
      {console.log(email)}
      <FormLayout>
        <TextField
          label="Name"
          value={textFieldValue}
          onChange={handleTextFieldChange}
          error={textFieldValue ? "" : "Name is required"}
        />
        <TextField
          value={email}
          onChange={handleEmailChange}
          label="Email"
          type="email"
          error={email ? "" : "Email is required"}
          helpText={
            <span>
              We’ll use this email address to inform you on future changes to
              Polaris.
            </span>
          }
        />
        <TextField
          value={password}
          onChange={handlePasswordChange}
          label="Password"
          type="password"
          error={password ? "" : "Password is required"}
          helpText={
            <span>
              We’ll use this email address to inform you on future changes to
              Polaris.
            </span>
          }
        />
        <Checkbox
          label="Sign up for the  newsletter"
          checked={newsletter}
          onChange={handleNewsLetterChange}
        />
        <Button
          submit
          primary={true}
          loading={loading}
          fullWidth={true}
          id="marketing-button"
        >
          Create your account
        </Button>
      </FormLayout>
    </Form>
  );
  return (
    <Page>
      <Layout>  
        <Layout.Section secondary>
          <Card title="Signup" sectioned>
            {signupForm}
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
};

当Onchange的所有值都得到更新，但使用onsubmit useCallback时，我只得到使用useState分配的旧值，我尝试使用onsubmit作为正常功能，如下面的代码，其工作原理

const handleSubmit = () => {
    console.log(textFieldValue,newsletter,email, password  )
  }

预期行为由于我想将所有数据发送到API，请教我如何使用useCallback进行操作，否则我可以使用常规的onSubmit函数

Answer 1

您错过了useCallback中的某些依赖项>

const handleSubmit = useCallback((_event) => {
   console.log(textFieldValue,newsletter,email, password  )
}, [textFieldValue,newsletter,email, password]);