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.
3 Réponses :
Essayez d'utiliser res.json au lieu de res.send dans la fonction node js qui cause l'erreur.
Essayez d'ajouter des consoles dans la fonction de requête réussie du nœud.
essayez de supprimer les en-têtes lorsque vous utilisez la méthode GET
headers: { 'Content-Type': 'application/json' }
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
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
J'ai trouvé le problème!
Je suis la suggestion ( @vengleab so ):
console log
response
au lieu deresponse => 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" }
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.