Je travaille par un tutoriel pour créer une application Web fullstack react avec backend connecté à mongo, maintenant en essayant de la fusionner avec mon code précédent, j'obtiens une erreur de syntaxe ..
J'essaye de rechercher dans google mais aucun des ça aide
ceci est mon erreur de console
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
// initialize our state
constructor(props){
super(props);
this.state = {
data: [],
id: 0,
message: null,
intervalIsSet: false,
idToDelete: null,
idToUpdate: null,
objectToUpdate: null
};
this.getDataFromDb = this.getDataFromDb.bind(this);
}
// when component mounts, first thing it does is fetch all existing data in our db
// then we incorporate a polling logic so that we can easily see if our db has
// changed and implement those changes into our UI
componentDidMount() {
this.getDataFromDb();
if (!this.state.intervalIsSet) {
let interval = setInterval(this.getDataFromDb, 1000);
this.setState({ intervalIsSet: interval });
}
}
// never let a process live forever
// always kill a process everytime we are done using it
componentWillUnmount() {
if (this.state.intervalIsSet) {
clearInterval(this.state.intervalIsSet);
this.setState({ intervalIsSet: null });
}
}
// just a note, here, in the front end, we use the id key of our data object
// in order to identify which we want to Update or delete.
// for our back end, we use the object id assigned by MongoDB to modify
// data base entries
// our first get method that uses our backend api to
// fetch data from our data base
getDataFromDb = () => {
fetch('http://localhost:3001/api/getData')
.then((data) => data.json())
.then((res) => this.setState({ data: res.data }));
};
ceci est mon code
module build failed(from ./node_modules/babel-loader/lib/index.js);
syntaxError: c:/users/aviram/zofim/client/src/app.js: unexpected token (49:16)
49| getDataFromDb = () => {
I` d aimerais compiler
4 Réponses :
Pour résoudre votre problème, remplacez cette ligne getDataFromDb = () => { par getDataFromDb () {.
Cela se produit parce que vous n'avez pas de propriétés de classe configurées sur vos configurations de construction, un plugin pour babel: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
Notez que cette syntaxe getDataFromDb = () => { n'est pas encore approuvée, la proposition et plus d'informations sur les propriétés de la classe: https://github.com/tc39/proposal-class-fields
Merci maintenant son: `] error in ./src/app.js [1] Builule de module a échoué (à partir de ./node_modules/babel-loader/lib/index.js): [1] SyntaxError: C: / Utilisateurs / aviram / zofim / client / src / app.js: jeton inattendu (108: 6) [1] [1] 106 | const {données} = ceci.state; [1] 107 | retour ([1]> 108 |
En fait, le problème est ici,
this.getDataFromDb = this.getDataFromDb.bind(this); //You can remove this line
Vous devriez appeler votre fonction getDataFromDb comme ceci,
let interval = setInterval(this.getDataFromDb(), 1000);
De plus, comme vous utilisez la fonction flèche, pas besoin de lier this,
let interval = setInterval(this.getDataFromDb, 1000);
Démo .
Remarque: Ici, l'appel de récupération a été remplacé par une autre URL pour le faire fonctionner.
Si vous utilisez la fonction de flèche, il n'est pas nécessaire de se lier. Donc, supprimer this.getdatafromdb = this.getdatafromdb.bind (this); code> cette ligne fonctionnera bien. P>
Vous avez oublié de terminer le crochet fermant} à la fin. Si vous utilisez la fonction de flèche, alors il n'y a pas besoin de liaison, alors supprimez cette ligne 'this.getDataFromDb = this.getDataFromDb.bind (this);'
Dépend de la façon dont vous avez configuré votre pipeline de build, publiez la configuration babel pertinente. En bref, utilisez ce babeljs.io/docs/en/babel-plugin- propriétés de classe de proposition