反應鈎子，發生無效鈎子調用錯誤

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

后一個更接近於所提到的代碼。

希望能幫助到你。 如有任何疑問，請回復。