使用带有钩子的 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) {

  // event.target wont be available when fn is run in setState

  // so we save them in our own local variables here

  const { name, value } = event.target;

  setValues(prev => ({

    ...prev,

    [name]: value

  }));

}

Answer 2

你的areEqual方法转化为

仅在value更改时重新呈现我的输入。

但实际上，你handleChange的钩子函数也在发生变化。此外，您handleChange对两个输入使用相同的内容。因此，Input“记住”只有handleChange上次发生value了变化，并且由于通过闭包进行handleChange跟踪values，因此它反过来“记住”了values它的创建时间。

更改您的areEqual方法（或完全省略它）以验证 中的更改handleChange将解决您的问题。

function areEqual(prevProps, nextProps) {

  return (

    prevProps.value === nextProps.value &&

    prevProps.handleChange === nextProps.handleChange

  );

}