Jestem nowicjuszem w ReactJS i tworzę prostego menedżera kontaktów. W moim komponencie InputContact biorę imię i adres e-mail kontaktu i po przesłaniu przechowuję w zmiennych stanu i przekazuję rodzicowi. Aby sprawdzić, czy mój stan var jest zaktualizowany, sprawdzam konsolę. Problem w tym, że po przesłaniu formularza po podaniu danych widzę tylko pustą linię w konsoli. Po ponownym kliknięciu na Prześlij, widzę moje dane wejściowe w konsoli.

Moje pytanie brzmi: Dlaczego muszę dwukrotnie kliknąć przycisk Prześlij, aby zobaczyć, jak moja zmienna stanu jest aktualizowana?

Mój plik InputContact.js

import React from 'react'
import { useState } from 'react';

const InputContact = (props)=>{

const [name, setName] = useState('');
const [email, setEmail] = useState('');


const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

    console.log(name)
 props.addContact(name,email);
    
}   
 
return(
    <>
        <form onSubmit={validateInput}>
            <label>Name
                <input type="text" name='fname' ></input>
            </label>
           <br/>
            <label>Email
                <input type="text" name='femail' ></input>
            </label>
            <button type="submit">Save</button>
        </form>
    </>
)
};
export default InputContact;

Mój plik app.js jest

import Header from './components/Header/Header'
import InputContact from './components/InputContact/InputContact';
import { v4 as uuidv4 } from 'uuid';


function App(){
 const [contacts, setContacts] = useState([]);

 const addContactFn= (name,email)=>{
   setContacts([...contacts, {id:uuidv4(), name:name, email:email}]);
   
 }
 return(
   <>
   <Header />
   <InputContact addContact = {addContactFn}/>
   </>
 )
}
export default App;  ```




   





1
Swapnil 25 czerwiec 2021, 16:03

4 odpowiedzi

Najlepsza odpowiedź

Twoje połączenie setName jest asynchroniczne. Nie możesz zagwarantować, że

console.log(name)

Zaraz po

setName(e.target.fname.value);
3
Amila Senadheera 25 czerwiec 2021, 13:07

Robię to w ten sposób, więc stan aktualizacji podczas pisania i kiedy go wysyłasz, jest już zaktualizowany.

<form onSubmit={validateInput}>
        <label>Name
            <input type="text" name='fname' onChange={e => setName(e.target.value) ></input>
        </label>
       <br/>
        <label>Email
            <input type="text" name='femail'  onChange={e => setEmail(e.target.value) ></input>
        </label>
        <button type="submit">Save</button>
</form>
0
Eloi 25 czerwiec 2021, 13:40

Aby sprawdzić zaktualizowaną wartość, możesz użyć haka Effect jako

import React from 'react'
import { useState, useEffect } from 'react';

.
.
.
useEffect(() => {
  console.log('Name', name);
}, [name]);

const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

 props.addContact(name,email);
    
}
.
.
.   
0
DevLoverUmar 25 czerwiec 2021, 13:16

Sposób, w jaki używasz stanu, nie jest tak naprawdę normalny. Chcesz użyć obsługi onChange na wejściach, aby ustawić stan dla każdego nazwiska i adresu e-mail, np.

onChange={(e)=> setEmail(e.target.value)}

Następnie onSubmit formularza powinien odnosić się do zmiennych stanu dla nazwy i adresu e-mail, a nie e.target.value

const validateInput = (e)=>{      
    e.preventDefault();
 props.addContact(name,email);
    
}   
0
andy mccullough 25 czerwiec 2021, 13:14