Der Versuch, die API zu holen, die ich erstellt habe, um auf die Komponente

Question

zu reagieren

Also habe ich die Test-API erstellt und der Datenbank einige Testdatensätze hinzugefügt.

Nun, wenn ich die Daten in reagieren Komponente erhalte ich diesen Fehler

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0 

wenn ich die Daten console.log, um zu sehen, ob es funktioniert versuchen holen wollte. Ich nehme an, es hat etwas damit zu tun, dass ich den API-Server auf Port 8080 starte und App auf 3000 reagiere (als ich API auf 3000 umschaltete und auf "Pfeil zurück" klickte) sah ich eine console.log mit den Daten, aber wann Ich habe die Seite aktualisiert, die erkannte, dass die API diese URL jetzt "besetzt".

Wie kann ich das Problem lösen? Hier ist der wichtige Teil des Codes. Wenn ich mehr posten muss, lassen Sie es mich wissen.

API (app \ src \ APITEST \ index.js):

const express = require('express'); 
const routes = require('./api.js'); 
const bodyParser = require('body-parser'); 
const mongoose = require('mongoose'); 

const app = express(); 

//connect to mongodb 
mongoose.connect('mongodb://localhost/drugDB'); 
mongoose.Promise = global.Promise; 

//serving files (folder name) 
app.use(express.static('../../../src')); 

app.use(bodyParser.json()); 

//initialize routes 
app.use('/api', routes); 

//error handling middleware 
app.use(function(err, req, res, next){ 
    res.send({error: err.message}) 
}) 



app.listen(process.env.port || 8080, function(){ 
    console.log('listening') 
}) 

2. Datei in API

const express = require('express'); 
const Drug = require('./models/drug'); 

const router = express.Router(); 

//get list of drugs 
router.get('/leki', function (req, res) { 
    Drug.find({}).then(function(drugs){ 
     res.send(drugs); 
    }) 
}) 

router.post('/leki', function (req, res, next) { 
    Drug.create(req.body).then(function (drug) { 
     res.send(drug); 
    }).catch(next); 

}) 

router.put('/leki/:id', function (req, res, next) { 
    Drug.findByIdAndUpdate({ _id: req.params.id }, req.body).then(function() { 
     Drug.findOne({ _id: req.params.id }).then(function (drug) { 
      res.send(drug); 
     }) 
    }) 
}) 

router.delete('/leki/:id', function (req, res, next) { 
    Drug.findByIdAndRemove({ _id: req.params.id }).then(function (drug) { 
     res.send({ type: drug }) 
    }); 
}) 

module.exports = router; 

reagieren Komponente (app \ src \ components \ Mainpanel \ panel.js) :

componentDidMount(){ 
    fetch('/api/leki').then(function(data){ 
     console.log(data.json()); 
    }) 
} 

Answer 1

Versuchen Sie folgendes:

componentDidMount() { 
    fetch('/api/leki') 
    .then(function (resolve) { return resolve.json(); }) 
    .then(function (resolveJson) { 
     console.log(resolveJson); 
    }); 
} 

Schauen Sie sich diese für weitere Informationen:

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

Answer 2

Der Fehler wird darauf hindeutet, dass Sie erhalten, nicht JSON zurück in der Antwort. Welches ist der Fall, weil im Inneren Ihres leki Endpunkt Sie verwenden res.send(drug); die Daten als HTML zurückschickt, es zu res.json({data: drug}) und dann innerhalb von componentDidMount ändern:

componentDidMount(){ 
     fetch('/api/leki', { 
     method: 'GET', 
     headers: {  
      'Accept': 'application/json', 
     } 
     }).then(function(response){ 
      return response.json(); 
     }).then(function(data) { 
     console.log(data.drug) 
     }) 
    } 

Answer 3

Sie benötigen einen Header, indem Cross Origin requests zu ermöglichen, in Antwort im Backend. Platzieren Sie diesen Code, wo Sie Ihre Antwort senden:

res.set('Access-Control-Allow-Origin', 'http://localhost:3000');