Пользовательский хук сбрасывается в исходное состояние

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', состояние сохранит предыдущие значения (name1)

Я не могу понять это поведение в хуках, кто-то может подробнее рассказать об этом?

Answer 1

Из документов :

Любая функция внутри компонента, включая обработчики событий и эффекты, «видит» реквизиты и состояние из рендера, в котором он был создан.

Здесь, когда вы используете useCallback, функция была определена в своем начальном рендере и имеет начальное состояние, определенное тогда. По этой причине useCallback имеет массив зависимостей, который можно использовать для рефракции sh функции и значений, используемых внутри него.

Но вы не можете использовать state в качестве зависимости, так как вы устанавливаете то же самое внутри него, вместо этого вы можете использовать функциональную версию 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] }))
}, [])