无法以onsubmit回调/ Shopify Polaris React Component的形式获取更新的值

问题摘要 嗨,团队, 我是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("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,password  )
  }

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

iCMS 回答:无法以onsubmit回调/ Shopify Polaris React Component的形式获取更新的值

您错过了useCallback

中的某些依赖项
const handleSubmit = useCallback((_event) => {
   console.log(textFieldValue,newsletter,email,password  )
},[textFieldValue,password]);
本文链接:https://www.f2er.com/2143546.html

大家都在问