Заполнение данных формы с сервера с помощью запроса ax ios - PullRequest
Новая
       3

Заполнение данных формы с сервера с помощью запроса ax ios

0 голосов
/ 13 марта 2020

Итак, я пытаюсь заполнить форму данными с моего сервера. Сервер возвращается просто отлично. Все строки. Я хочу, чтобы каждое поле формы заполнялось текущими сведениями из базы данных.

Я пробовал следующее:

  • установка каждой функции состояния в useEffect, но это не позволило бы мне чтобы изменить данные формы

  • , установив значение по умолчанию, но это работает только для одного экземпляра формы
    и затем возвращается обратно 

    function Dashboard(props) {
    const { classes } = props;

    let user = firebase.getCurrentUser(); 
    let id = user.uid;

    const [profile, setProfileData] = useState(''); 

    useEffect( () => {
        axios.get('https://www.memento-wedding.com/user/' + id)
        .then(response => {
            setProfileData(response.data); 
        }) 
        console.log(profile.gender);
    }); 

    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('');
    const [date, setDate] = useState('');
    const [gender, setGender] = useState();

    return (
        <div className="form">
        <h1 className="white center">Welcome, {firebase.getCurrentUsername()}!</h1> 
        <h1 className="white center">Create a Profile</h1>
        <Form onSubmit={e => e.preventDefault() && false}>
            <Row form>
            <Label for="firstName" sm={3} className="white right">First Name</Label>
            <Col sm={6}>
                <Input type="text" name="firstName" id="name" value={firstName} onChange={e=>setFirstName(e.target.value)}/>
            </Col>
            <Col sm={1}></Col>
            </Row>
            <br></br>
            <Row form>
            <Label for="firstName" sm={3} className="white right">Last Name</Label>
            <Col sm={6}>
                <Input type="text" name="firstName" id="name" value={lastName} onChange={e=>setLastName(e.target.value)}/>
            </Col>
            <Col sm={1}></Col>
            </Row>
            <br></br>
            <Row form>
            <Label for="email" sm={3} className="white right">Email</Label>
            <Col sm={6}>
                <Input type="email" name="email" id="email" disabled value={profile.email}/>
            </Col>
            </Row>
            <br></br>
            <Row form>
            <Label for="birthday" sm={3} className="white right">Birthday</Label>
            <Col sm={6}>
                <Input type="date" name="date" id="date" value={date} onChange={e=>setDate(e.target.value)}/>
            </Col>
            </Row>
            <br></br>  
            <Row>
            <Label for="gender" sm={3} className="white right">Gender</Label>
            <Col md={5} sm={7}>
            <RadioButtons gender={gender} setGender={e=>setGender(e.target.value)} />
            </Col>
            </Row>
         </Form>
    )

    }

1 Ответ

0 голосов
/ 13 марта 2020

Пожалуйста, добавьте условие фильтра [] 

useEffect( () => {
    axios.get('https://www.memento-wedding.com/user/' + id)
    .then(response => {
        setProfileData(response.data); 
    }) 
    console.log(profile.gender);
},[]);
...