无法在表单提交回调/Shopify Polaris React 组件中获取更新值

Question

问题总结 大家好，我是 Polaris 的新手，正在尝试使用以下代码创建 React 注册表单

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("mark@hello.com");
  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]);

无法在表单提交回调/Shopify Polaris React 组件中获取更新值

Unable to get updated value in form onsubmit callback / Shopify Polaris React Component

onsubmit

reactjs

polaris

react-hooks

usecallback