मैं प्रतिक्रिया/नोड/एक्सप्रेस/पोस्टग्रेस का उपयोग कर ऐप के लिए लॉगिन/पंजीकरण बनाने की कोशिश कर रहा हूं। जहां मैं फंस रहा हूँ सर्वर पक्ष पर प्रतिक्रिया में मेरे प्रपत्र से डेटा प्राप्त हो रहा है।

मेरे पास register.js में फॉर्म के लिए एक रजिस्टर घटक है

import React from 'react';
import useForm from '../form/useForm';

const Register = () => {

    const { values, handleChange, handleSubmit } = useForm({
            name: '',
            email: '',
            password: "",
            password2: ""
        }, register);

    function register() {
        console.log(values);
    }

  return (
            <div className="row mt-5">
              <div className="col-md-6 m-auto">
                <div className="card card-body">
                  <h1 className="text-center mb-3">
                    <i className="fas fa-user-plus"></i> Register
                  </h1>
                  <form 
                    action="/users/register" 
                    method="POST"
                    onSubmit={handleSubmit}>
                    <div className="form-group">
                      <label htmlFor="name">Name</label>
                      <input 
                      className="form-control" 
                      type="name" 
                      name="name" 
                      onChange={handleChange} 
                      placeholder="Enter Name"
                      value={values.name} 
                      required />
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Email</label>
                      <input 
                      className="form-control" 
                      type="email" 
                      name="email" 
                      onChange={handleChange} 
                      placeholder="Enter Email"
                      value={values.email} 
                      required />
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Password</label>
                      <input 
                      className="form-control" 
                      type="password" 
                      name="password" 
                      onChange={handleChange} 
                      placeholder="Create Password"
                      value={values.password} 
                      required />
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Confirm Password</label>
                      <input 
                      className="form-control" 
                      type="password" 
                      name="password2" 
                      onChange={handleChange} 
                      placeholder="Confirm Password"
                      value={values.password2} 
                      required />
                    </div>
                    <button type="submit" className="btn btn-primary btn-block">
                      Register
                    </button>
                  </form>
                  <p className="lead mt-4">Have An Account? <a href="/login">Login</a></p>
                </div>
              </div>
            </div>
  );
};

export default Register;

useForm.js में प्रपत्र क्रियाओं को संभालने के लिए एक हुक

import {useState, useEffect} from 'react';

const useForm = (initialValues, callback) => {

const [hasError, setErrors] = useState(false);
const [values, setValues] = useState(initialValues);

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(setValues(values => ({ ...values, [event.target.name]: event.target.value })))
    }
    fetch("/users/register", options)
  }

  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
  }
};

export default useForm;

फिर मेरे पास users.js में लॉग इन/पंजीकरण के लिए मार्गों को प्रबंधित करने के लिए एक फ़ाइल है

const express = require("express");
const Router = require("express-promise-router");
const db = require("../db");
const router = new Router();

//Login page
router.get('/login', (req, res) => res.send("Login"));

//Register page
router.get('/register', (req, res) => res.send("Register"));

//Register Handle
router.post('/register', (req, res) => {
    console.log(req.body);
    res.send('hecks');
});

module.exports = router;

मैंने अपने useForm.js हुक में handleSubmit फ़ंक्शन के अंदर की चीजों के साथ खिलवाड़ करने की कोशिश की है, लेकिन सब कुछ console.log(req.body) की ओर जाता है मेरी users.js फ़ाइल से undefined . मुझसे कहां गलती हो रही है?

#1 संपादित करें: पोस्ट अनुरोध भेजने वाले पोस्टमैन से स्निप करें यहां छवि विवरण दर्ज करें

#2 संपादित करें: मूल परियोजना संरचना

.
./client
./client/src
./client/src/components
./client/src/components/register
./client/src/components/register/register.js
./client/src/components/form
./client/src/components/form/useForm.js
./client/src/App.js
./routes
./routes/index.js
./routes/users.js
./server.js

#3 संपादित करें: मुख्य server.js फ़ाइल

const express = require("express");
const mountRoutes = require("./routes");
const app = express();
mountRoutes(app);
var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

//catch all other routes
app.get("*", function(req, res) {
    res.send("<h1>Page does not exist, sorry</h1>");
});

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));
1
userNick 1 फरवरी 2020, 22:53

3 जवाब

सबसे बढ़िया उत्तर

बढ़ते मार्गों से पहले आपको बॉडीपार्सर लागू करना होगा। तो इस तरह बदलें:

var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

mountRoutes(app);

आप तब का उपयोग नहीं करते हैं या हैंडल सबमिट फ़ंक्शन में प्रतीक्षा करते हैं जिससे समस्या हो सकती है।

क्या आप इस तरह हैंडल सबमिट फ़ंक्शन को अपडेट कर सकते हैं और कोशिश कर सकते हैं?

  const handleSubmit = async event => {
    if (event) event.preventDefault();
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(values)
    };

    try {
      const response = await fetch("/users/register", options);

      const responseData = await response.json();

      if (response.ok) {
        console.log("response ok");
        callback();
      } else {
        console.log("response NOT ok");
        throw new Error(responseData.message);
      }
    } catch (err) {
      console.log(err);
      if (err.response) {
        console.log(err.response.data);
      }
    }
  };
1
SuleymanSah 2 फरवरी 2020, 22:31

‍🏫 आप नीचे दिए गए इस कोड के साथ प्रयास कर सकते हैं:

userForm.js: सुनिश्चित करें कि आपका handleSubmit आपके userForm.js में नीचे दिए गए कोड जैसा दिखता है:

const handleSubmit = async(event) => {
    if (event) event.preventDefault();
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(values)
    }

    try {
        // change with your endpoint
        const endpoint = 'http://localhost:3001/users/register';
        const result = await fetch(endpoint, options);
        // send value to your register function
        callback(result);
    } catch (ex) {
        console.log('Something failed');
        console.log(ex);
    }
}

आपको callback(result) का उपयोग करना होगा, ताकि आप अपने register फ़ंक्शन पर उस मान को console.log कर सकें।

एक्सप्रेस सर्वर: सुनिश्चित करें कि आपके एक्सप्रेस सर्वर में, आपको body-parser जोड़ दिया गया है, यह नीचे दिए गए कोड जैसा दिखेगा:

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

ऊपर दिया गया वह कोड आपके req.body को काम कर देगा।

मुझे आशा है कि यह आपकी मदद कर सकता है 🙏।

0
Titus Sutio Fanpula 2 फरवरी 2020, 02:34

आप JSON.stringify में राज्य सेट कर रहे हैं जो अपरिभाषित है। आपको इसमें मान पास करना होगा:

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(values)
    }
    fetch("/users/register", options)
  }
2
Muhammad Ali 1 फरवरी 2020, 23:04