javascript - que - sintaxis básica de java script

React.js-Error de sintaxis: esta es una palabra reservada en la función render()

Question

Estoy atascado en un error para la palabra clave reservada "this". En mi componente React a continuación, me muestra pasar un estado desde mi componente principal "App.js" a mi componente "RecipeList.js" para luego asignar los datos y representar cada componente RecipeItem. Simplemente no entiendo por qué me sale este error

React.js - Error de sintaxis: esta es una palabra reservada

El error se llama en RecipeList dentro del método de retorno de representación; ¡Si alguien pudiera ayudar, eso sería genial!

Gracias

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

Envuelva la parte this.renderRecipeItems() con un div , funcionará.

La razón por la que estaba fallando, se explica extremadamente bien por @ nem035 en esta answer .

Me gusta esto:

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

Y pienso en lugar de:

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

Debería ser:

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

Estos son los cambios que puedo ver, es posible que se requieran otros.

Answer 2

Puede evitar esto reescribiendo RecipeLists.js como un componente sin estado puro .

Como componente puro:

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;

Entonces, ahora su componente es básicamente una función con params.

Answer 3

Todas las soluciones dadas aquí son correctas.

El cambio más fácil es simplemente envolver su llamada de función en un elemento JSX:

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

Sin embargo, ninguna de las respuestas le dice (correctamente) por qué el código se estaba rompiendo en primer lugar.

En aras de un ejemplo más fácil, simplifiquemos un poco su código

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

tal que el significado y el comportamiento siguen siendo los mismos. (eliminar parenths y mover curlies):

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

Lo que hace este código es que contiene un bloque, denotado por {} , dentro del cual está intentando invocar una función.

Debido a la declaración de return , el bloque {} se trata como un objeto literal

Un objeto literal es una lista de cero o más pares de nombres de propiedades y valores asociados de un objeto, encerrados entre llaves ({}).

que espera a: b sintaxis a a: b o a ( shorthand ) para sus pares de propiedad-valor.

// valid object
return {
  prop: 5
}

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

Sin embargo, está pasando una llamada de función, que no es válida.

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

Al revisar este código, el motor asume que leerá un literal de objeto. Cuando llegue al this. , se da cuenta de eso . no es un carácter válido para un nombre de propiedad (a menos que lo esté envolviendo en una cadena, vea más abajo) y la ejecución se rompe aquí.

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

test();

Para demostración, si envuelve su llamada de función entre comillas, el código aceptaría el . como parte de un nombre de propiedad y se rompería ahora porque no se proporciona un valor de propiedad:

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

test();

Si elimina la declaración de return , el código no se rompería porque eso sería una llamada de función dentro de un block :

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

test();

Ahora, un problema adicional es que no es el motor JS el que está compilando su código, sino que es babel , por lo que obtiene this is a reserved word error de this is a reserved word lugar de Uncaught SyntaxError: Unexpected token . .

La razón es que JSX no acepta palabras reservadas del lenguaje JavaScript, como class y this . Si elimina this , puede ver que el razonamiento anterior todavía se aplica : babel intenta analizar el código como un objeto literal que tiene una propiedad, pero no tiene valor, lo que significa que babel ve esto:

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