javascript - React hook，发生Invalid hook call错误

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

Hooks 只能在函数组件内部创建。您需要在函数组件中使用 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>
  )
}

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

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