Envoyer des données de React vers Node js à l'aide de onSubmit

Question

J'ai ceci onSubmit dans mon script React qui est appelé lorsque je clique sur le bouton de soumission :

const handleSubmit = (event) => {
event.preventDefault();
const form = event.target;
const rawdata = new FormData(form);
const data = {
    email: rawdata.get('email'),
    password: rawdata.get('password'),
};

console.log(data);
const response = fetch('http://localhost:4000/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
}).then(response => {
    if(response.ok) {
        console.log('Form data sent successfully');
    } else {
        console.error('Failed to send form data');
    }
}).catch (error => console.error(error));
}

Il doit envoyer les données à mon script node js et appeler la fonction suivante :

app.post("/register", function (req, res){
    console.log("inside /register");
    console.log("email: " + req.body.email);
    User.register({username: req.body.email}, req.body.password, function(err, user){
        if(err) {
            console.log(err);
            console.log("couldn't register");
            //res.redirect("/signup");
        } else{
            passport.authenticate("local")(req, res, function(){
                console.log("login granted");
            });
        }
    });
});

Mais il indique que les données que j'essaie d'enregistrer (req.body.email) ne sont pas définies. Si quelqu'un peut m'aider, je serais très reconnaissant. Merci

Answer 1

J'ai édité le code ci-dessous et je peux maintenant récupérer les données de mon script React dans mon script Node js :

const handleSubmit = (event) => {
    event.preventDefault();
    const form = event.target;
    const rawdata = new FormData(form);
    const data = {
        email: rawdata.get('email'),
        password: rawdata.get('password'),
    };

    console.log(data);
    fetch('http://localhost:4000/register', {
        method: 'POST',
        headers:{
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        console.log("response ok: " + response.ok);
        console.log("response status: " + response.status);
        console.log("response json: " + response.json());
        if(response.ok) {
            console.log('Form data sent successfully');
            return response.json();
        } else {
            console.error('Failed to send form data');
        }
    }).catch (error => console.error(error));

Et dans mon script node j'ai dû ajouter la ligne suivante au début :

app.use(bodyParser.json());
app.use(express.static("public"));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
   extended: true
}));

Cela fonctionne maintenant. La ligne app.use dans le nœud est le problème.