0
votes

comment corriger l'erreur de syntaxe que j'obtiens dans le composant react?

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


1 commentaires

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


4 Réponses :


0
votes

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


1 commentaires

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 |

[1] | ^ [1] 109 |
    [1] 110 | {data.length <= 0 [1] 111 | "Aucune entrée" Aucune entrée de DB encore '[1 ] `



0
votes

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.


0 commentaires

0
votes

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); cette ligne fonctionnera bien.


0 commentaires

0
votes

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);'


0 commentaires