React.js - Erreur de syntaxe : this is a reserved word dans la fonction render()

Question

Je suis bloqué sur une erreur pour le mot clé réservé "this". Dans mon composant React, je fais passer un état de mon composant principal "App.js" à mon composant "RecipeList.js" pour ensuite mapper les données et rendre chaque composant RecipeItem. Je ne comprends pas pourquoi je reçois cette erreur.

React.js - Erreur de syntaxe : ceci est un mot réservé

L'erreur est appelée dans RecipeList à l'intérieur de la méthode de retour de rendu. Si quelqu'un peut aider, ce serait génial !

Merci

App.js

//main imports
import React, { Component } from 'react';

//helper imports
import {Button} from 'reactstrap'
import RecipeItem from './components/RecipeItem';
import RecipeList from './components/RecipeList';
import './App.css';

const recipes = [
  {
    recipeName: 'Hamburger',
    ingrediants: 'ground meat, seasoning'
  },
  {
    recipeName: 'Crab Legs',
    ingrediants: 'crab, Ole Bay seasoning,'
  }
];

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      recipes
    };
  }

  render() {
    return (
      <div className="App">
        <div className = "container-fluid">
          <h2>Recipe Box</h2>
          <div>
            <RecipeList recipes = {this.state.recipes}/>
          </div>
        </div>
        <div className = "AddRecipe">
          <Button>Add Recipe</Button>
        </div>

      </div>
    );
  }
}

export default App;

RecipeLists.js

import React, {Component} from 'react';
import _ from 'lodash';
import RecipeItem from './RecipeItem';

class RecipeList extends Component {

    renderRecipeItems() {
      return _.map(this.props.recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);
    }

    render() {
      return (
        { this.renderRecipeItems() }
      );
    }
}

export default RecipeList

Answer 1

Toutes les solutions données ici sont correctes.

Le changement le plus simple est d'envelopper votre appel de fonction dans un élément JSX :

return (
  <div>
    { this.renderRecipeItems() }
  </div>
)

Cependant, aucune des réponses ne vous dit (correctement) pourquoi le code a été cassé en premier lieu.

Pour un exemple plus facile, simplifions un peu votre code

// let's simplify this
return (
  { this.renderRecipeItems() }
)

de telle sorte que la signification et le comportement soient toujours les mêmes. (supprimer les parenthèses et déplacer les accolades) :

// into this
return {
  this.renderRecipeItems()
};

Ce que fait ce code, c'est qu'il contient un bloc, noté par {} dans lequel vous essayez d'invoquer une fonction.

En raison de la return le bloc {} est traité comme un objet littéral

Un littéral objet est une liste de zéro ou plusieurs paires de noms de propriétés et de valeurs associées d'un objet, entre accolades ({}).

qui attend soit a: b o a ( sténographie ) pour ses paires propriété-valeur.

// valid object
return {
  prop: 5
}

// also valid object
const prop = 5;
return {
  prop
}

Cependant, vous passez un appel de fonction à la place, ce qui est invalide.

return {
  this.renderRecipeItems() // There's no property:value pair here
}

En parcourant ce code, le moteur suppose qu'il va lire un objet-littéral. Lorsqu'il atteint le this. il constate que . n'est pas un caractère valide pour un nom de propriété (à moins que vous ne l'ayez enveloppé dans une chaîne de caractères - voir ci-dessous) et l'exécution s'interrompt ici.

function test() {
  return {
    this.whatever()
    //  ^ this is invalid object-literal syntax
  }
}

test();

Par exemple, si vous avez mis votre appel de fonction entre guillemets, le code acceptera l'expression suivante . en tant que partie d'un nom de propriété et se briserait maintenant parce qu'une valeur de propriété n'est pas fournie :

function test() {
  return {
    'this.whatever()' // <-- missing the value so the `}` bellow is an unexpected token
  }
}

test();

Si vous retirez le return le code ne serait pas cassé car il s'agirait alors simplement d'un appel de fonction dans une instruction bloc :

function test() {
  /* return */ {
    console.log('this is valid')
  }
}

test();

Maintenant, un problème supplémentaire est que ce n'est pas le moteur JS qui compile votre code mais c'est babel c'est pourquoi vous obtenez le this is a reserved word au lieu de Uncaught SyntaxError: Unexpected token . .

La raison en est que JSX n'accepte pas les mots réservés du langage JavaScript tels que class y this . Si vous retirez this vous pouvez voir que le le raisonnement ci-dessus s'applique toujours - babel essaie d'analyser le code comme un objet littéral qui a une propriété, mais pas de valeur, ce qui signifie que babel voit ceci :

return {
  'renderRecipeItems()' // <-- notice the quotes. Babel throws the unexpected token error
}

Answer 2

Vous pouvez éviter cela en réécrivant RecipeLists.js en tant que composant apatride pur .

En tant que composant pur :

import _ from 'lodash';
import RecipeItem from './RecipeItem';

const RecipeList = props => renderRecipeItems(props);

const renderRecipeItems = ({ recipes }) => _.map(recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);

export default RecipeList;

Donc maintenant, votre composant est essentiellement une fonction avec des paramètres.

Answer 3

Enveloppez le this.renderRecipeItems() partie avec un div cela fonctionnera.

La raison de cet échec est très bien expliquée par @nem035 dans ce document. respuesta .

Comme ça :

render () {
   return (
      <div>
         { this.renderRecipeItems() }
      </div>
   );
}

Et je pense qu'au lieu de :

<RecipeItem key = {i} {...recipes} />

Il devrait l'être :

<RecipeItem key = {i} {...recipeItem} />

Ce sont les changements que je vois, peut-être que d'autres seront nécessaires aussi.