Блог

 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) =gt;{  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 (  lt;divgt;  lt;Form onSubmit={  handleSubmit  }gt;  lt;Form.Group className="mb-3 mx-3" gt;  lt;Form.Labelgt;AGElt;/Form.Labelgt;  lt;Form.Control name="age" type="text" placeholder="AGE: " /gt;  lt;/Form.Groupgt;  lt;Form.Group className="mb-3 mx-3" gt;  lt;Form.Labelgt;HESlt;/Form.Labelgt;  lt;Form.Control name="hes" type="text" placeholder="Hes CODE: " /gt;    lt;/Form.Groupgt;  lt;Form.Group className="mb-3 mx-3" gt;  lt;Form.Labelgt;VISAlt;/Form.Labelgt;  lt;Form.Control name="visa" type="text" placeholder="Visa: " /gt;  lt;/Form.Groupgt;    lt;div className="d-grid gap-2"gt;  lt;Button onClick = {() =gt;{  setIslem("NC")  }}variant="secondary" type="submit" size="lg"gt;  New Customer  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("NCC");  }}variant="secondary" type="submit" size="lg"gt;  New Cards  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("FI");  }}variant="secondary" type="submit" size="lg"gt;  For information  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("WDM");  }}variant="secondary" type="submit" size="lg"gt;  Withdraw / Deposit Money  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("IO");  }}variant="secondary" type="submit" size="lg"gt;  Insurance Operations  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("RO");  }}variant="secondary" type="submit" size="lg"gt;  Retirement Operations  lt;/Buttongt;  lt;Button onClick = {(e) =gt;{  setIslem("PT")   }}variant="secondary" type="submit" size="lg"gt;  Paying Fines / Taxes / Debt  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("SME");  }}variant="secondary" type="submit" size="lg"gt;  SME Operations  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("INO");  }}variant="secondary" type="submit" size="lg"gt;  Investment Operations  lt;/Buttongt;  lt;Button onClick = {() =gt;{    setIslem("MM");  }}variant="secondary" type="submit" size="lg"gt;  Money Management  lt;/Buttongt;  lt;/divgt;    lt;/Formgt;    lt;/divgt;    ); }  export default App;  

Это мой код, база данных, записывающая данные только после 2-й отправки, и она записывает старые данные. Я хочу записать данные в первом представлении. Например: в первом представлении мои данные : возраст = 15 лет, во втором представлении мои данные : возраст = 16 лет,

В базе данных это написано так: [возраст = «» , возраст = «15»]. Он всегда идет на 1 шаг позади. Как я могу это решить?

Было бы лучше, если бы вы обновили состояния во время изменения, а не во время отправки, в любом случае, чтобы устранить возникшую у вас проблему, я предлагаю вам отправить параметры формы вместо состояний, так как React не изменит их значение до следующего рендеринга.

 const handleSubmit = (event) =gt;{  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), я бы сказал, не нужны