React hook，发生 Invalid hook call 错误答案

【问题标题】：React hook, Invalid hook call error occursReact hook，发生 Invalid hook call 错误
【发布时间】：2019-12-18 10:52:37
【问题描述】：

我正在使用 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 函数但状态改变时，它给了我上面提到的错误.

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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>
  )
}

后一个更接近问题中提到的代码。

希望对您有所帮助。如有任何疑问，请回复。

【讨论】：