反应钩子，发生无效钩子调用错误

Question

我正在使用 react hooks 构建一个项目，但在下面收到此错误。

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 组件，当我单击按钮（比如 Click!!!）时，onClick 触发 authRequest 函数，但状态发生了变化，它给了我上面提到的错误。

Answer 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>
  )
}

后一个更接近于所提到的代码。

希望能帮助到你。 如有任何疑问，请回复。