Значение флажка не передается должным образом в backend API - PullRequest
Новая
       105

Значение флажка не передается должным образом в backend API

1 голос
/ 07 августа 2020

У меня есть страница регистрации, созданная в ReactJS. Одно из полей - это галочка isadult. Когда я нажимаю кнопку Register и сохраняю поля в базе данных (MongoDB), значение isadult отображается как [Object object] вместо конкретного значения: True или False.

Что я делаете что-то неправильно? 

import React from 'react';
import { Paper, makeStyles, Grid, TextField, Button, Switch } from '@material-ui/core';
import config from '../../config/config.json';
import axios from 'axios';

const useStyles = makeStyles((theme) => ({
    root: {
        minWidth: '300px',
        width: '50%',
        padding: '20px 20px 20px 20px',
        margin: 'auto'
    }
}));

const Register = () => {
    const classes = useStyles();

    const [username, setUsername] = React.useState('');
    const [password, setPassword] = React.useState('');
    const [isadult, setIsAdult] = React.useState('');

    const handleChangeIsAdult = (event) => {
        setIsAdult({
          ...isadult, 
          [event.target.name]: event.target.value,
        });
    }

    const handleRegister = () => {
        if (username && password) {
            const formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);
            formData.append('isadult', isadult);
            axios.post(config.api.url + '/auth/register', formData)
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }

    return (
        <Paper className={classes.root}>
            <div >
                <Grid container spacing={8} alignItems="flex-end">
                    <Grid item md={true} sm={true} xs={true}>
                        <TextField
                            id="username"
                            label="Username"
                            type="email"
                            fullWidth
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            autoFocus />
                    </Grid>
                </Grid>
                <Grid container spacing={8} alignItems="flex-end">
                    <Grid item md={true} sm={true} xs={true}>
                        <TextField
                            id="password"
                            label="Password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            fullWidth />
                    </Grid>
                </Grid>
                <Grid container spacing={8} alignItems="flex-end">
                    <Grid item md={true} sm={true} xs={true}>
                        <label>Is adult?</label>
                        <input
                            type='checkbox'
                            onChange={(event) => {
                                handleChangeIsAdult({
                                target: {
                                    name: event.target.name,
                                    value: event.target.checked,
                                },
                                });
                            }}
                        />
                    </Grid>
                </Grid>
                <Grid container justify="center" style={{ marginTop: '10px' }}>
                    <Button
                        variant="outlined"
                        color="primary"
                        style={{ textTransform: "none" }}
                        onClick={handleRegister}
                    >
                        Register
                    </Button>
                </Grid>
            </div>
        </Paper>
    );
}

export default Register;

1 Ответ

1 голос
/ 07 августа 2020

Поскольку ваше свойство состояния isadult предназначено для использования во вводе флажка, оно должно быть объявлено и обновлено как логическое.

Вы объявляете свойство следующим образом: 

const [isadult, setIsAdult] = React.useState('');

Первоначальное присвоение - это пустая строка (''), которая может вызвать проблемы с другими частями кода вашего приложения, если они ожидают, что это свойство будет иметь логический тип. Вместо этого вы должны начать его как логическое: 

const [isadult, setIsAdult] = React.useState(false);

Теперь основная проблема, с которой вы сталкиваетесь, заключается в том, что данные формы сериализуются, а isadult является объектом. Эта проблема возникает из-за того, что вы назначаете ему объект через setIsAdult: 

setIsAdult({
    ...isadult, 
    [event.target.name]: event.target.value,
});

Средство установки свойства состояния добавляет любое значение, переданное ему, непосредственно в свойство, к которому оно прикреплено. Он работает иначе, чем setState, который ожидает объект состояния. Правильный способ использовать этот метод в этом случае: 

setIsAdult(event.target.value);

Здесь event.target.value содержит именно флажок checked логическое значение, которое должно go превращаться в isadult. Теперь это свойство правильно сериализовано как логическое значение в вашем formData.

...