1
votes

ReactJS et Node.JS [JSON.parse: caractère inattendu à la ligne 1 colonne 1 des données JSON]

J'ai du mal avec ce code, j'ai donc besoin d'un troisième œil pour trouver une solution.

Je développe une application ReactJS avec une API REST avec Node.JS (Express), et je ' Je reçois cette erreur:

SyntaxError: "JSON.parse: caractère inattendu à la ligne 1 colonne 1 des données JSON"

J'utilise Sequelize ORM pour travailler avec des modèles et des bases de données dans Node.JS. J'utilise également le module CORS pour Node.JS.

Cette implémentation fonctionne très bien.

// ReactJS for Posts
postsFunction() {
        fetch('http://localhost:4500/posts', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(json => {
                this.setState({'posts': json.posts.rows});
            })
            .catch((err) => {
                console.log(err);
                this.setState({errors: "Posts error."})
            });
    }
// Node.JS for Posts
const router = require('express').Router();
const Post = require('post');
router.get("/posts", async (req, res) => {
    try {
        await Post.findAndCountAll()
            .then((posts) => {
                res.send({"posts": posts});
            }).catch((err) => {
                return res.send(err);
            });
    } catch (err) {
        return res.send(err);
    }
});

De l'autre part, cette implémentation ne fonctionne pas correctement et lève le SyntaxError ci-dessus:

// ReactJS for login
loginFunction(e, data) {
    e.preventDefault();
    fetch('http://localhost:4500/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
        .then(response => response.json())
        .then(json => {
            this.setState({'user': json['user']});
        })
        .catch((err) => {
            console.log(err);
            this.setState({errors: "Login error"})
        });
}
// Node.js Route for login
const router = require('express').Router();
const User = require('user');
router.post("/login", async (req, res) => {
    try {
        await User.findOne({
            where: {
                email: req.body.email,
                password: req.body.password,
            }
        }).then((user) => {
            if (!user) {
                return res.send({message: "Login error!"});
            } else {
                const userData = {id: user.id, email: user.email};
                res.send({"user": userData});
            }
        }).catch((err) => {
            return res.send(err);
        });
    } catch (err) {
        return res.send(err);
    }
});

Comme vous pouvez le voir à la fois implémentation ont de petites différences, que me manque-t-il?

PS: Quand je teste la 2ème implémentation sur Postman, les données sont récupérées avec succès.


2 commentaires

Quelle est la raison de la stringification des données que vous venez d'analyser en json? this.setState ({messages: JSON.stringify (json.posts.rows)})


Il est juste resté là lorsque j'ai copié à partir d'un autre exemple de routeur. Déjà corrigé dans l'exemple de code. Le modifier ne représente pas des résultats positifs.


3 Réponses :


0
votes

Essayez d'utiliser res.json au lieu de res.send dans la fonction node js qui cause l'erreur.


1 commentaires

Essayez d'ajouter des consoles dans la fonction de requête réussie du nœud.



1
votes

essayez de supprimer les en-têtes lorsque vous utilisez la méthode GET

headers: {
       'Content-Type': 'application/json'
}


4 commentaires

vous pouvez essayer de consigner la réponse au lieu de response => response.json () , peut-être que la réponse pourrait être une erreur de votre code try catch, pas des données json


@YulioAlemanJimenez, ou peut-être que vous pouvez essayer d'utiliser axios au lieu de fetch


Lorsque vous remplacez response.json () par response , j'obtiens cet objet: Réponse: {body: ReadableStream verrouillé: false : object {…} BodyUsed: false headers: Headers {} ok: true redirigé: false status: 200 statusText: "OK" type: "basic" url: "http: // localhost: 3000 / admin / undefined / posts "} Notez l'URL, pourquoi il concatène React URL + undefined + chemin de route Node.JS ??


Moi non plus, il est de récupérer la lib



0
votes

J'ai trouvé le problème!

Je suis la suggestion ( @vengleab so ):

console log response au lieu de response => response.json ()

Je me rends compte que response renvoie un objet comme celui-ci:

fetch(process.env.REACT_APP_API_URL + '/posts', {

L'attribut URL contient un non défini value, donc quand j'essaye de console.log la variable .env API_URL qui contient l'URL localhost utilisée dans cette ligne:

fetch(process.env.API_URL + '/posts', {

En fonction réelle, c'est:

fetch('http://localhost:4500/posts', {

Le résultat de console.log était indéfini .

Comme expliqué dans la documentation de Create React App , les variables d'environnement doivent commencer par le préfixe REACT_APP_.

Enfin, la ligne fonctionne comme:

Response: {
    body: ReadableStream
    locked: false
    <prototype>: object { … }
    bodyUsed: false
    headers: Headers { }
    ok: true
    redirected: false
    status: 200
    statusText: "OK"
    type: "basic"
    url: "http://localhost:3000/admin/undefined/posts"
}


0 commentaires