REACT，在第二次單擊提交按鈕之前，preventDefault后的表單提交不起作用

    import React , {useState } from "react";
import Button from 'react-bootstrap/Button';
import Form from "react-bootstrap/Form"
import 'bootstrap/dist/css/bootstrap.min.css';
import {push,ref} from "firebase/database";
import db from "./firebase";


function App() {
  const [age, setAge] = useState("");
  const [hes, setHes] = useState("");
  const [visa, setVisa] = useState("");
  const [islem , setIslem] = useState("");
  
  const handleSubmit = (event) =>{
    event.preventDefault();
    setAge(event.target[0].value);
    setHes(event.target[1].value);
    setVisa(event.target[2].value);
    push(ref(db,"info"),{
      age: age,
      hes: hes,
      visa : visa,
      islem : islem
    })
  }
  return (
    <div>
    <Form onSubmit={
      handleSubmit
    }>
    <Form.Group   className="mb-3 mx-3" >
      <Form.Label>AGE</Form.Label>
      <Form.Control name="age" type="text" placeholder="AGE: " />
    </Form.Group>
    <Form.Group  className="mb-3 mx-3" >
      <Form.Label>HES</Form.Label>
      <Form.Control  name="hes" type="text" placeholder="Hes CODE: " />
      
    </Form.Group>
    <Form.Group  className="mb-3 mx-3" >
      <Form.Label>VISA</Form.Label>
      <Form.Control  name="visa" type="text" placeholder="Visa: " />
    </Form.Group>
  
    <div className="d-grid gap-2">
      <Button onClick = {() =>{
        setIslem("NC")
      }}variant="secondary" type="submit" size="lg">
      New Customer
      </Button>
      <Button onClick = {() =>{
        
        setIslem("NCC");
      }}variant="secondary" type="submit" size="lg">
      New Cards
      </Button>
      <Button onClick = {() =>{
        
        setIslem("FI");
      }}variant="secondary" type="submit" size="lg">
      For information
      </Button>
      <Button onClick = {() =>{
        
        setIslem("WDM");
      }}variant="secondary" type="submit" size="lg">
      Withdraw / Deposit Money
      </Button>
      <Button onClick = {() =>{
        
        setIslem("IO");
      }}variant="secondary" type="submit" size="lg">
      Insurance Operations
      </Button>
      <Button onClick = {() =>{
        
        setIslem("RO");
      }}variant="secondary" type="submit" size="lg">
      Retirement Operations
      </Button>
      <Button onClick = {(e) =>{
        setIslem("PT")  
      }}variant="secondary" type="submit" size="lg">
      Paying Fines / Taxes / Debt
      </Button>
      <Button onClick = {() =>{
        
        setIslem("SME");
      }}variant="secondary" type="submit" size="lg">
      SME Operations
      </Button>
      <Button onClick = {() =>{
        
        setIslem("INO");
      }}variant="secondary" type="submit" size="lg">
      Investment Operations
      </Button>
      <Button  onClick = {() =>{
        
        setIslem("MM");
      }}variant="secondary" type="submit" size="lg">
      Money Management
      </Button>
  </div>
    
  </Form>
  
  </div>
  
  );
}

export default App;

這是我的代碼，資料庫僅在第二次提交后寫入資料，并且正在寫入舊資料。我想在第一次提交時寫入資料。例如：第一次提交時我的資料是：age = 15，第二次提交時我的資料是：age = 16，

在資料庫中它是這樣寫的：[age = "" , age = "15"]。它總是落后一步。我該如何解決這個問題。

uj5u.com熱心網友回復：

如果您在修改時而不是在提交時更新狀態會更好，無論如何，為了解決您遇到的問題，我建議您發送表單的引數而不是狀態，因為 React 不會更改值這些直到下一次渲染。

const handleSubmit = (event) =>{
    event.preventDefault();
    setAge(event.target[0].value);
    setHes(event.target[1].value);
    setVisa(event.target[2].value);
    push(ref(db,"info"),{
      age: event.target[0].value,
      hes: event.target[1].value,
      visa : event.target[2].value,
      islem : islem
    })
  }

然而，在這種情況下，狀態變數（setAge、setHes、setVisa）是不必要的，我會說

標籤：javascript 反应

上一篇：webpack-scss無法決議背景影像url

下一篇：Discord.js上的ERR_INVALID_ARG_TYPE