useNavigate 挂钩在 React 18.2.0 中不起作用

Question

我有三页，一页用于表格，另一页用于感谢页面，最后一页用于管理员。表单页面触发一个事件，该事件调用带有状态的 useNavigate 函数。但是当我提交表单时，它不会从表单页面导航到感谢页面，尽管所有数据都已发送到数据库。我正在使用“react”：“^18.2.0”，“react-dom”：“^18.2.0”和“react-router-dom”：“^6.6.2”。下面是我正在使用的代码：

    import React from 'react'
import {useState} from 'react'
import {useNavigate} from 'react-router-dom'
import supabase from '../config/supabase'
import src from '../assets/figo.jpg'

const Home = () => {
    const navigate = useNavigate()
    
    const handleChange=()=>{
        setisChecked(!isChecked);
    }
    const [isChecked, setisChecked]=useState(false);
    
    const [fname,setFname] = useState('')
    const [lname,setLname] = useState('')
    const [age,setAge] = useState('')
    const [email,setEmail] = useState('')
    const [phone,setPhone] = useState('')
   
    const [formError, setFormError]=useState(null)

    const handleSubmit=async(e)=>{
     e.preventDefault()

     if(!fname || !lname || !age || !email ||!phone ){
        setFormError('please fill all the fields')
        return
     }
     const {data,error} = await supabase 
     .from('profiles')
     .insert([{fname,lname,age,email,phone}])

     if(error){
      console.log(error)
      setFormError('check internet connection')
     }
     if(data){
      console.log(data)
      setFormError(null)
      navigate('/thank')
     }
    }
  return (
    <div>
        <form onSubmit={handleSubmit}>
        <div class="h3">
            <h3>FIGO MARATHON REGISTRATION FORM 2023</h3>
            </div>
            <img src={src} alt=""/>
            <h4>Location:Uhuru stadium, Dar es Salaam, Tanzania</h4>
            <h4>Race Dates: 12/3/2023</h4>
            <h4>Time: 6am to 1pm</h4>

            <div class="h3">
            <h3>Participants Details</h3>
            </div>

            <label htmlFor='fname'>First Name</label>
            <input type="text" id="fname" value={fname}
            onChange={(e)=>setFname(e.target.value)}
            />

            <label htmlFor='lname'>Last Name</label>
            <input type="text" id="lname" value={lname}
            onChange={(e)=>setLname(e.target.value)}
            />

            <label htmlFor='age'>Age</label>
            <input type="number" id="age" value={age}
            onChange={(e)=>setAge(e.target.value)}
            />

            <label htmlFor='email'>Email</label>
            <input type="text" id="email" value={email}
            onChange={(e)=>setEmail(e.target.value)}
            />

             <label htmlFor='phone'>Phone Number</label>
            <input type="text" id="phone" value={phone}
            onChange={(e)=>setPhone(e.target.value)}
            />

            <div class="h3">
            <h3>Waiver & Release</h3>
            </div>

            <h5>Weaver health questions</h5>
            <div class="ri">
            <input class="ro" type="checkbox" id="confirm"
            checked={isChecked}
             onChange={handleChange}/>
            <p>I confirm that i am in good shape,health and condition.</p>
            </div>

             <div class="ri">
            <input class="ro" type="checkbox" id="medical"
            checked={isChecked} onChange={handleChange}/>
            <p>I don't have any medical condition or medical history that will affect my participation in this event.</p>
            </div>

            <div class="ri">
            <input class="ro" type="checkbox" id="follow"
            checked={isChecked}
            onChange={handleChange}/>
            <p>I will follow the rule and regulations of the road race event.</p>
            </div>

            <div class="ri">
            <input class="ro" type="checkbox" id="road"
            checked={isChecked}
             onChange={handleChange}/>
                <p>I acknowledge that this road race requires physical activity and rhere are possible risks and danger</p>
            </div>

            <div class="ri">
            <input class="ro" type="checkbox" id="reg"
            checked={isChecked}
             onChange={handleChange}/>
                <p>I confirm that all information in this registration form is accurate and true</p>
            </div>

            <button>Submit</button>
            {formError && (<p>{formError}</p>)}
        </form>
    </div>
  )
}

export default Home

Answer 1

我只是通过传递我初始化的所有数据而不是数据来解决它

 const handleSubmit=async(e)=>{
 e.preventDefault()

 if(!fname || !lname || !age || !email ||!phone ||!relate ||!emphone ||!team ||!trans ){
    setFormError('please fill all the fields')
    return
 }
 const {data,error} = await supabase 
 .from('profiles')
 .insert([{fname,lname,age,email,phone,relate,emphone,team,trans}])

 if(error){
  console.log(error)
  setFormError('check internet connection or check the transaction message')
 }
 if(fname,lname,age,email,phone,relate,emphone,team,trans){
  console.log(fname,lname,age,email,phone,relate,emphone,team,trans)
  setFormError(null)
  navigate("/thank")
 }
 
}