Reactjs 自定义挂钩重置为其初始状态

钩子

组成部分

export const useCreateAccount = () => {
  const [state, setState] = useState(initialState)

  const onChangeInput: ChangeEventFunction = useCallback(({ target }) => {
    if (!target.files) {
      return setState({ ...state, [target.name]: target.value })
    }
    setState({ ...state, [target.name]: target.files[0] })
  }, [])


  return { onChangeInput }
}

const{onChangeInput}=useCreateAccount（）

每次我在第二个输入（name2）中做一些更改时，组件的先前状态（name1）都已丢失（重置为初始状态），这就是我使用“useCallback”的原因，我只需要一个“onChangeInput”实例

但如果我删除“useCallback”，则状态将保留以前的值（name1）

我无法理解钩子中的这种行为，有人能详细说明一下吗？

来自：

组件中的任何函数，包括事件处理程序和效果，都可以从创建它的渲染中“查看”道具和状态

在这里，当您使用

useCallback

时，函数已在其初始呈现中定义，并已定义初始状态。这就是为什么

useCallback

有一个dependency数组，可用于刷新函数及其内部使用的值

但是您不能使用

state

作为依赖项，因为您在其中设置了相同的值，相反，您可以使用，以便获取state的先前值，而不是引用中心值

const { onChangeInput } = useCreateAccount()

<form>
 <input name="name1" onChange={onChangeInput}>
 <input name="name2" onChange={onChangeInput}>
</form>

const onChangeInput: ChangeEventFunction = useCallback(({ target }) => {
    if (!target.files) {
      return setState(prevState => ({ ...prevState, [target.name]: target.value }));
    }
    setState(prevState => ({ ...prevState, [target.name]: target.files[0] }))
}, [])