Я строю проект, используя реакционные хуки, но получаю эту ошибку ниже.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

И это код ниже

const authRequest = (e: any) => {
  e.preventDefault();
  alert('Error!')
  const [authRequestState, authRequestTrue] = React.useState(false)
  authRequestTrue(true)
}


const renderFormikForm = () => {
  return (
    <Formik initialValues={{country: '', number: ''}} onSubmit={(values) => {submitForm(values)}}>
      {({ values, errors, touched, handleChange, handleBlur}) => (
        <form>
          <div className='input-box'>
            <p className='input'>
              <input type='email' name='email' placeholder='emial' value='libeto@commontown.co'/>
            </p>
            <p className='input'>
              <input type='number' name='number' placeholder='number' value={values.number} onChange={handleChange} style={{width: '50%'}} />
              <button onClick={(e) => authRequest(e)}><em><a>Click!!!</a></em></button>
            </p>
          </div>
        </form>
      )}
    </Formik>
  )
}

Таким образом, в основном, функциональный компонент рендерит renderFormikForm component , и когда я нажимаю кнопку (скажем, Click !!!), onClick запускает функцию authRequest, но вместо этого состояние изменяется, это дает мне ошибку, о которой я упоминал выше.

1
GoonGamja 18 Дек 2019 в 13:52

1 ответ

Хуки могут быть созданы только внутри функциональных компонентов. Вам необходимо использовать useState внутри компонента функции .

Обновите ваш код следующим образом:


const renderFormikForm = () => {
  const [authRequestState, authRequestTrue] = React.useState(false)

  const authRequest = (e: any) => {
    e.preventDefault();
    alert('Error!')
    authRequestTrue(true)
  }
  return (
    <Formik initialValues={{country: '', number: ''}} onSubmit={(values) => {submitForm(values)}}>
      {({ values, errors, touched, handleChange, handleBlur}) => (
        <form>
          <div className='input-box'>
            <p className='input'>
              <input type='email' name='email' placeholder='emial' value='libeto@commontown.co'/>
            </p>
            <p className='input'>
              <input type='number' name='number' placeholder='number' value={values.number} onChange={handleChange} style={{width: '50%'}} />
              <button onClick={(e) => authRequest(e)}><em><a>Click!!!</a></em></button>
            </p>
          </div>
        </form>
      )}
    </Formik>
  )
}

или вы также можете переписать его следующим образом:

const authRequest = (e: any, authRequestTrue) => {
  e.preventDefault();
  alert('Error!')
  authRequestTrue(true)
}
const renderFormikForm = () => {
  const [authRequestState, authRequestTrue] = React.useState(false)

  return (
    <Formik initialValues={{country: '', number: ''}} onSubmit={(values) => {submitForm(values)}}>
      {({ values, errors, touched, handleChange, handleBlur}) => (
        <form>
          <div className='input-box'>
            <p className='input'>
              <input type='email' name='email' placeholder='emial' value='libeto@commontown.co'/>
            </p>
            <p className='input'>
              <input type='number' name='number' placeholder='number' value={values.number} onChange={handleChange} style={{width: '50%'}} />
              <button onClick={(e) => authRequest(e, authRequestTrue)}><em><a>Click!!!</a></em></button>
            </p>
          </div>
        </form>
      )}
    </Formik>
  )
}

Последний более близок к коду, упомянутому в вопросе.

Надеюсь, это поможет. Возврат к любым сомнениям.

4
Sunil 18 Дек 2019 в 11:11