我得到了以下錯誤，不知道我在 arrow functionion 中實體化 react hooks 時做錯了什么：
錯誤。
錯誤。無效的鉤子呼叫。鉤子只能在函陣列件的主體內呼叫。這可能是由于以下原因之一：
錯誤：無效的鉤子呼叫。
- 您可能擁有不匹配的 React 和呈現器版本（例如 React DOM）
- 您可能破壞了 React 和呈現器版本。
- 您可能破壞了鉤子規則 你可能在同一個應用程式中擁有多個 React 副本 請參閱https://reactjs.org/link/invalid-hook-call，了解有關如何除錯和修復這一問題的提示。
這是我的代碼片段。(這是一個驗證性的 react js 檔案，它回傳了一個錯誤狀態（如果有的話），而在呼叫方法中，它期待著另一個狀態的錯誤）：
import React,.
import React, {useState, useEffect} from 'react'; 從'axios'中匯入axios；
。
const [errors, setErrors] = useState（{}）。
const checkUserExists = async (phone) => {
console.log('Inside CheckUserExists'/span>)
let isUserExist = false;
let formData = new FormData();
formData.append('phone', phone) 。
const response = await axios.post('http://localhost:3001/doesUserExistByPhone', formData) 。 then(response=>/span>{
isUserExist = false;
console.log('Success response: '/span>, response)
}).catch(errorResponse=>/span>{
console.log('Error response: '/span>, errorResponse)
isUserExist = true。
setErrors(
...錯誤, {phone: 'User Already exist, u know?' }。
)
})
return isUserExist;
}
const patternName = new RegExp('^[a-zA-Z ]{3,20}$'/span>)
const patternPhone = new RegExp('^[0-9]{9,10}$'/span>)
const patternEmail = new RegExp（'^[a-zA-Z0-9. _:$!%-] @[a-zA-Z0-9.-] .[a-zA-Z]$')
const patternPassword = new RegExp(' (? =.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
if(!values.name || !patternName.test(values.name) {
//errors.name="請輸入有效名稱"。
}
if(!values.phone || !patternPhone.test(values.phone) ){
//errors.phone="Please enter a valid Phone number of 9-10 digits"。
}
if(!values.email || !patternEmail.test(values.email) ){
//errors.email="Please enter a valid email address"。
}
if(!values.password || !patternPassword.test(values.password) ){
//errors.password="請輸入一個強密碼以繼續。一個強大的密碼有。至少8個字符的長度，2個大寫字母，1個特殊字符（！@#$&*），2個數字（0-9），3個小寫字母"。
}
if(!values.isTermsAndConditionsAccepted){
//errors.isTermsAndConditionsAccepted = "請接受條款和條件"。
}
//檢查用戶是否已經存在。
if( values.phone){
console.log('Inside if Values.phone is not NULL... will check if user exist...')
checkUserExists(values.phone)
}
console.log('Errors found before create user: ', errors)。
return {errors};
}
export default ValidateRegister````。
uj5u.com熱心網友回復：
確保你所有的鉤子（useState, useEffect...）都在checkUserExists函式里面
。CodePudding[/p
你是否在做constateRegister = () =>{}來包裝你發布的所有內容？看來你沒有使用react組件，或者你想把一個組件作為一個函式使用，所以你不能使用const [errors, setErrors] = useState({})。 你可以創建一個名為useCheckUserList的自定義鉤子，帶有錯誤和setError狀態，并回傳checkUserExists和錯誤狀態，并將其匯入你的組件中。
。import{useState}。from 'react"
export const useCheckUserList =（）=> {
const [errors, setErrors] = useState（{}）。
const checkUserExists = async (phone) => {
console.log('Inside CheckUserExists'/span>)
let isUserExist = false;
let formData = new FormData();
formData.append('phone', phone) 。
const response = await axios.post('http://localhost:3001/doesUserExistByPhone', formData) 。 then(response=>/span>{
isUserExist = false;
console.log('Success response: '/span>, response)
}).catch(errorResponse=>/span>{
console.log('Error response: '/span>, errorResponse)
isUserExist = true。
setErrors(
...錯誤, {phone: 'User Already exist, u know?' }。
)
})
return isUserExist;
}
return {errors, checkUserList};
}<script src="https://cdnjs. cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">/span></script>
<script src="https://cdnjs.cloudflare. com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 而在你要使用它的檔案中，只需匯入useCheckUserList，并做如下處理。 const {errors, checkUserList} = useCheckUserList() 現在你可以使用checkUserList函式和錯誤狀態。
這只是一個例子，你也可以將你的所有代碼放入一個自定義鉤子中，然后在 ValidateRegister 組件中使用它。
uj5u.com熱心網友回復：
你必須把 "error和setError "傳給你的ValidateRegister組件，從你呼叫或匯入該組件的地方，比如：
<ValidateRegister error={error} setError={setError}。/>
//在ValidateRegister組件中把它作為道具，如。
const ValidateRegister=（{error, setError}）=> {
//你的代碼。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/322735.html
標籤：