如何在 React.js 中解决这个 Fetch 问题？

Question

我尝试在 MongoDB 中发布表单的地方进行了此提取。

当我填写表格时，我会返回： SyntaxError: Unexpected end of input at ContactRequest.js:3:1

而且我不知道为什么，因为 fetch 从表单接收数据并在邮递员中测试端点它工作正常。

fetch 应该可以工作，因为我在其他项目中使用了相同的 Fetch。

这是获取组件。

const contactRequest = (params) => {
  console.log(`Test ${JSON.stringify(params)}`);
  fetch(`http://localhost:4000/contact`, {
      method: "POST",
      body: JSON.stringify(params),
      mode: "no-cors",
      headers: {
        'Content-Type': 'application/json'
      }})
      .then(res => res.json())
      .catch((e) => console.error(e));
};


export default contactRequest; 

这是表单组件：

import React, {useState} from 'react';
import contactRequest from '../Request/ContactRequest';
import './Contact.css';

const initialState = {
    nameAndSurname: "",
    email: "", 
    phoneNumber: "",
    message: "",
};

const Contact = () => {

    const [contactData, setContactData] = useState(initialState);

    const handlerInput = (e) => {
        setContactData({
            ...contactData,
            [e.target.name] : e.target.value
        });
    };

    const handlerSubmit = (e) => {
        e.preventDefault();
        setContactData(initialState);
        contactRequest(contactData);
        alert("Hemos recibido tu mensaje.");
    }

    return (
            <div>
                <form onSubmit={handlerSubmit}>
                    <label className="nameAndSurname-label">
                        Nombre y Apellido: <br/>
                        <input 
                            id="nameAndSurname"
                            type="text" 
                            name="nameAndSurname" 
                            placeholder="Ingrese su nombre y apellido"
                            onChange={handlerInput}
                            value={contactData.nameAndSurname}
                            required/> <br/>
                    </label>
                    <div className="email-phoneNumber-div">
                    <label>
                        Email: <br/>
                        <input
                            id="email" 
                            type="email" 
                            name="email" 
                            placeholder="Ingrese su email"
                            onChange={handlerInput}
                            value={contactData.email}
                            required/> <br/>
                    </label>
                    <label>
                        Numero de teléfono: <br/>
                        <input 
                            id="phoneNumber"
                            type="number" 
                            name="phoneNumber" 
                            placeholder="Ingrese su numero de teléfono"
                            onChange={handlerInput}
                            value={contactData.phoneNumber}
                            required/> <br/>
                    </label>
                    </div>
                    <label>
                        Mensaje: <br/>
                        <input 
                            id="message"
                            type="text" 
                            name="message" 
                            placeholder="Ingrese su mensaje"
                            onChange={handlerInput}
                            value={contactData.message}
                            required/> <br/>
                    </label>
                    <label>
                        Al enviar este formulario, acepto los terminos y condiciones.
                    </label>
                    <button
                        id="submit-btn"
                        type="submit" 
                        value="Submit">Enviar</button>
                </form>
            </div>
        </div>
    )
}

export default Contact;

这是端点。

const express = require('express');
const router = express.Router();
const Contact = require('../models/Contact.js');

router.post('/contact', (req, res) => {
  console.log(req.body);
  console.log(req.text);
  let contact = new Contact()
  contact.nameAndSurname = req.body.nameAndSurname
  contact.email = req.body.email
  contact.phoneNumber = req.body.phoneNumber
  contact.message = req.body.message
  
  contact.save((err, contactStored) => {
    if(err) {
      res.status(500).send({message: `Error ${err}`})
    }else {
      res.status(200).send({contact: contactStored})
    }
  })
})


module.exports = router;

Answer 1

您为什么使用mode: "no-cors"？这会导致“不透明”响应，没有 body，因此没有任何东西可以转换为 json