Реагирует на доступ к состоянию из useState до его объявления - PullRequest
Новая
       2

Реагирует на доступ к состоянию из useState до его объявления

1 голос
/ 17 июня 2019

Я пытаюсь узнать, как перехватчики React работают с простым модалом аутентификации, который я настроил. У меня есть пользовательский хук useForm, который обрабатывает состояние формы, и мне любопытно, как я могу получить доступ к values до его объявления. 

function LoginModal () {
   console.log('outside values', values) // undefined
   const submitForm = async () => {
     console.log('inside values', values) // email, password values exist
     const request = {
        method: 'POST',
        url: '/auth/login',
        data: {
           email: values.email,
           password: values.password
        }
    }
    await axios(request)
  }

  const [values, handleChange, handleSubmit] = useForm(submitForm)

  return <div>some form stuff</div>
}

`useForm.js`

import { useState } from 'react'

const useForm = submitForm => {
  const [state, setState] = useState({})

  const handleChange = event => {
    event.persist()
    setState(state => ({ ...state, [event.target.name]: event.target.value }))
  }

  const handleSubmit = event => {
    event.preventDefault()
    submitForm()
  }

  return [state, handleChange, handleSubmit]
}

export default useForm

Может ли кто-нибудь объяснить мне, почему values существует только внутри функции submitForm, и как она доступна до того, как const [values] даже объявлен? Я считаю, что const декларации не подняты. Спасибо!

1 Ответ

1 голос
/ 17 июня 2019

Когда вы объявляете функцию, JS сохраняет это объявление в памяти и предоставляет доступ к соответствующей локальной и глобальной области видимости. Это то, что происходит с вашей submitForm функцией. В примере из фрагмента ниже это функция someFunc.

Как видно из приведенного ниже примера, если вы выполните эту функцию до того, как будет объявлена ​​переменная values, вы получите undefined. Потому что это еще не входит в сферу применения.

Но если вы выполните функцию через событие click, как вы делаете, после того, как переменная values была определена, ваша функция сможет «увидеть» переменную, потому что она уже находится в Объем.

ПРИМЕЧАНИЕ: Вы правы. const декларации не поднимаются. 

function App() {
  
  // WHEN YOU CALL IT THROUGH A CLICK EVENT, THE VARIABLE `values` WILL BE IN SCOPE
  function someFunc() {
    console.log('State from someFunc(): ' + values);
  }
  
  console.log('State from component body BEFORE variable "values" declaration: ' + values);
  
  someFunc(); // WHEN EXECUTED AT THIS POINT. IT HAS NO ACCESS TO 'values' BECAUSE IT'S STILL undefined
  
  const [values,setValues] = React.useState(['a','b','c']);
  
  console.log('State from component body AFTER variable "values" declaration: ' + values);
  
  return(
    <button onClick={someFunc}>Click to run someFunc()</button>
  );
}

ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...