Невозможно получить обновленное значение в форме при отправке обратного вызова / Shopify Компонент Polaris React

Question

Краткое описание проблемы Привет, команда! Я новичок в Polaris и пытаюсь создать форму регистрации для реагирования со следующим кодом.

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("[e-mail]");
  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]);