使用带有钩子的 React.memo 来控制输入

Question

我正在通过自定义 React 钩子提供一些表单功能。这个钩子有一些类似于 Formik 的功能（但这真的是基本的东西）。

function useFormValidation(initialState, validate) {

  const [values, setValues] = React.useState(initialState);

  const [errors, setErrors] = React.useState({});

  const [isSubmitting, setSubmitting] = React.useState(false);

  React.useEffect(() => {

    if (isSubmitting) {

      const noErrors = Object.keys(errors).length === 0;

      if (noErrors) {

        console.log("authenticated!", values.email, values.password);

        setSubmitting(false);

      } else {

        setSubmitting(false);

      }

    }

  }, [errors]);

  function handleChange(event) {

    setValues({

      ...values,

      [event.target.name]: event.target.value

    });

  }

  function handleBlur() {

    const validationErrors = validate(values);

    setErrors(validationErrors);

  }

  function handleSubmit(event) {

    event.preventDefault();

    const validationErrors = validate(values);

    setErrors(validationErrors);

    setSubmitting(true);

  }

  return {

    handleSubmit,

    handleChange,

    handleBlur,

    values,

    errors,

    isSubmitting

  };

}

表格如下：

function Register() {

  const {

    handleSubmit,

    handleChange,

    handleBlur,

    values,

    errors,

    isSubmitting

  } = useFormValidation(INITIAL_STATE, validateAuth);

  // const [email, setEmail] = React.useState("");

  // const [password, setPassword] = React.useState("");

  return (

    <div className="container">

      <h1>Register Here</h1>

      <form onSubmit={handleSubmit}>

        <Input

          handleChange={handleChange}

          handleBlur={handleBlur}

          name="email"

          value={values.email}

          className={errors.email && "error-input"}

          autoComplete="off"

          placeholder="Your email address"

        />

我在第一个输入中输入了一些文本。然后，当我切换到第二个输入并开始输入时，第一个输入丢失了值。这就像表单没有呈现 LAST MEMOIZED 输入，而是呈现以前的版本。我是 React 初学者，无法找出解决方案。请问有什么帮助吗？

Answer 1

尝试使用setState带有函数的更新程序形式：function handleChange(event) {&nbsp; // event.target wont be available when fn is run in setState&nbsp; // so we save them in our own local variables here&nbsp; const { name, value } = event.target;&nbsp; setValues(prev => ({&nbsp; &nbsp; ...prev,&nbsp; &nbsp; [name]: value&nbsp; }));}

Answer 2

你的areEqual方法转化为仅在value更改时重新呈现我的输入。但实际上，你handleChange的钩子函数也在发生变化。此外，您handleChange对两个输入使用相同的内容。因此，Input“记住”只有handleChange上次发生value了变化，并且由于通过闭包进行handleChange跟踪values，因此它反过来“记住”了values它的创建时间。更改您的areEqual方法（或完全省略它）以验证 中的更改handleChange将解决您的问题。function areEqual(prevProps, nextProps) {&nbsp; return (&nbsp; &nbsp; prevProps.value === nextProps.value &&&nbsp; &nbsp; prevProps.handleChange === nextProps.handleChange&nbsp; );}