Javascript react中的useForm在两次手动更新中工作不正常

我是新来的。 我是按照本·阿瓦德的指示用钩子的。我的useForm钩子的代码如下

import { useState } from 'react';

// eslint-disable-next-line import/prefer-default-export
export const useForm = initialValues => {
  const [values, changeValue] = useState(initialValues);
  const func = e => {
    changeValue({ ...values, [e.target.name]: e.target.value });
  };
  return [values, func];
};

 const [inputs, changeInputs] = useForm({ name:'', email: '', password: '', mobile: '' });

它工作得很完美，但当我不得不手动更新状态时，我遇到了一个问题。我宣布该州如下

import { useState } from 'react';

// eslint-disable-next-line import/prefer-default-export
export const useForm = initialValues => {
  const [values, changeValue] = useState(initialValues);
  const func = e => {
    changeValue({ ...values, [e.target.name]: e.target.value });
  };
  return [values, func];
};

 const [inputs, changeInputs] = useForm({ name:'', email: '', password: '', mobile: '' });

并更改输入标记中的值，如下所示（它也工作正常）：-

但是，当我取消注释上述代码的第4行时，只有name正在更新移动值，该值与默认值相同

Edit1-func=（e）=>

EDIT2-解决方案（静态解决方案） 只需更改useForm，如下所示

import { useState } from 'react';

// eslint-disable-next-line import/prefer-default-export
export const useForm = initialValues => {
 const [values, changeValue] = useState(initialValues);
 const func = (e) => {
  console.log(e.type);
  if(e.type==='change')
   changeValue({ ...values, [e.target.name]: e.target.value });
  else
   changeValue(state => { return { ...state, [e.target.name]: e.target.value }});
 };
return [values, func];
};

EDIT3-简单甜蜜的解决方案 按以下方式访问或仅更改func函数

 const func = (e) => {
  const {name,value} = e.target;
  changeValue(state => { return { ...state, [name]: value }});
 };

---

changeValue

是异步的，因此当您连续两次调用

changeInputs

时，会发生以下情况：

// 1st call: values is { name:'', email: '', password: '', mobile: '' }
changeValue({ ...values, mobile: '1111111111' });

// 2nd call: values still is { name:'', email: '', password: '', mobile: '' }
changeValue({ ...values, name: 'Anuj' });

因此，只保存第二次呼叫：

values: { name: 'Anuj', email: '', password: '', mobile: '' }

要解决该问题，您需要修改

useForm.changeValue

：

const { name, value } = e.target;
changeValue(state => { return { ...state, [name]: value }});

---

我对React钩子还不是很有经验，但看起来这个钩子基本上并不像您现在所做的那样被设计为可以使用两次。问题是，

值

始终是从

useState

返回的值，它不会“看到”第一次调用的新值。很抱歉，我不知道如何立即修改

useForm

以使其工作，但我希望我们这里会有开发人员。换句话说，我认为这只是设计用于

onChange

方法。连续两次手动调用是导致问题的原因。感谢您的快速回复。你能详细说明我要做什么吗？我是否必须更改useForm.js或其他内容？只需更改

useForm

中的

changeValue

，请参阅我的答案的最后一行

import{useState}from'react'；//eslint禁用下一行导入/首选默认导出const useForm=initialValues=>{const[values，changeValue]=useState（initialValues）；const func=（e）=>{changeValue（values=>{return{…values，[e.target.name]：e.target.value}；}；return[values，func]；}我希望，我更改了与您指导的相同的行，但它给出了错误，因为在changeValue中没有定义e。它显示了错误。。。第7:50行：意外使用“event”无限制全局变量第7行是“changeValue”（值=>{return{…values，[event.target.name]：event.target.value}）`我的坏，使用
e
。我很困惑，因为您在
useForm
中使用
e
，在
handleRegister
const { name, value } = e.target;
changeValue(state => { return { ...state, [name]: value }});