如果没有解构，这个组件会是什么样子？

Question

我有组件 Form，我在其中使用 Formik 库：

const Form = () => {
    const {handleSubmit, values, handleChange} = useFormik({
      initialValues: {
          username: '',
          email: '',
          password: '',
          confirm_password: '',
      },
      onSubmit: (formValues) => {
          console.log('submit', formValues);
      },    
    });

   return (
   <form className="fform" onSubmit={handleSubmit} onChange={handleChange}/>
       <input name="username" value={values.username} onChange={handleChange} />
       <input name="email" value={values.email} onChange={handleChange} />
       <input name="password" value={values.password} onChange={handleChange} />
       <input name="confirm_password" value={values.confirm_password} onChange={handleChange} />
       <button type="submit">Submit Form</button>
   </form>
   );
};

有一次老师说：

here I do destructuring:

const {handleSubmit, values, handleChange} =

但是，如果在这种情况下不使用 destructuring，Form 组件会是什么样子呢？也就是说，如何在不解构的情况下编写组件，但要在 Form 组件中包含 useFormik 方法？因为我需要这些方法的形式。

Answer 1

您可以将返回值赋值给对象变量

const res = useFormik({

你可以使用这个对象

<form className="fform" onSubmit={res.handleSubmit} onChange={res.handleChange}/>
       <input name="username" value={res.values.username} onChange={res.handleChange} />
...

Answer 2

你可以在一个常量中得到 useFormik 的值

const useFormikObj = useFormik({
  initialValues: {
    username: '',
    email: '',
    password: '',
    confirm_password: '',
  },
  onSubmit: (formValues) => {
    console.log('submit', formValues);
  },    
});

useFormik 将 return 包含 handleSubmit, values, handleChange 的对象（根据您的示例）

所以现在您要为您尝试访问的每个属性创建一个单独的常量

const handleSubmit = useFormikObj.handleSubmit
const values = useFormikObj.values
const handleChange = useFormikObj.values

现在您的应用程序的其余部分应该看起来一样

另一个例子

如果你有这样的对象

const obj = {
  name: 'Andrew',
  age: 27,
}

您可以通过常规表示法访问这些属性

obj.name //Andrew
obj.age //27

但是如果你必须多次使用它，你可能想避免每次都使用 obj.，所以你可以像这样使用解构

const { name, age } = obj

如果是数组就这样

const array = [1, 2, 3]
const [ x1, x2, x3 ] = array //x1 = 1, x2 = 2 and so on

您可以查看更多关于结构化的内容 here

希望对您有所帮助

如果没有解构，这个组件会是什么样子？

How this component would look like without destructuring?

reactjs

formik