reactjs - 自定义钩子(Hook)重置为其初始状态

Question

钩

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()

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

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

但是，如果我删除“useCallback”，状态将保留以前的值(名称 1)

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

Answer 1

来自 docs :

Any function inside a component, including event handlers and effects, “sees” the props and state from the render it was created in.

在这里，当您使用 useCallback ，该函数已在其初始渲染中定义，然后定义了初始状态。这就是为什么 useCallback的原因有一个依赖数组，可用于刷新其中使用的函数和值。

但是您不能使用 state作为依赖项，因为您在其中设置了相同的内容，而您可以使用 functional version of setState 以便获得状态的先前值，而不是引用中央值。

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