React Form preventDefault后首次提交不生效 需点击两次才写入数据

根因分析 #

你的数据提交滞后是React状态的异步更新特性导致的：
setAge、setHes、setVisa、setIslem这些状态更新方法都是异步的，调用后不会立刻修改对应的状态变量，而是会等当前同步代码块执行完成后再批量更新。你在状态更新语句后立刻调用Firebase的写入接口，拿到的永远是更新前的旧值，所以才会出现数据滞后一步的情况。

修复方案 #

推荐你直接从提交事件中拿最新的表单值，完全规避异步状态的依赖问题，同时简化按钮逻辑，修改后的代码如下：

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 handleSubmit = (event) =>{
    event.preventDefault();
    // 直接从表单获取最新输入值，不依赖异步更新的state
    const age = event.target.age.value;
    const hes = event.target.hes.value;
    const visa = event.target.visa.value;
    // 直接获取触发提交的按钮的value，不需要单独设置islem状态
    const islem = event.nativeEvent.submitter.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">
      {/* 给每个提交按钮加value属性，不需要单独写onClick事件 */}
      <Button value="NC" variant="secondary" type="submit" size="lg">
      New Customer
      </Button>
      <Button value="NCC" variant="secondary" type="submit" size="lg">
      New Cards
      </Button>
      <Button value="FI" variant="secondary" type="submit" size="lg">
      For information
      </Button>
      <Button value="WDM" variant="secondary" type="submit" size="lg">
      Withdraw / Deposit Money
      </Button>
      <Button value="IO" variant="secondary" type="submit" size="lg">
      Insurance Operations
      </Button>
      <Button value="RO" variant="secondary" type="submit" size="lg">
      Retirement Operations
      </Button>
      <Button value="PT" variant="secondary" type="submit" size="lg">
      Paying Fines / Taxes / Debt
      </Button>
      <Button value="SME" variant="secondary" type="submit" size="lg">
      SME Operations
      </Button>
      <Button value="INO" variant="secondary" type="submit" size="lg">
      Investment Operations
      </Button>
      <Button value="MM" variant="secondary" type="submit" size="lg">
      Money Management
      </Button>
  </div>
    
  </Form>
  
  </div>
  
  );
}

export default App;

如果你需要保留状态变量做其他逻辑校验，也可以将表单改为受控模式：给每个Form.Control绑定value和onChange属性，输入时就实时更新对应的状态，提交时直接读取状态变量即可。

内容的提问来源于stack exchange，提问作者cagriii