React.js - Синтаксическая ошибка: это зарезервированное слово в функции render()

Я застрял на ошибке для зарезервированного ключевого слова "это". В моем компоненте React ниже показано, как я передал состояние из моего основного компонента "App.js" в свой компонент "RecipeList.js", чтобы затем отобразить данные и отобразить каждый компонент RecipeItem. Я просто не понимаю, почему я получаю эту ошибку

React.js - Синтаксическая ошибка: это зарезервированное слово

Ошибка вызывается в RecipeList внутри метода возврата рендеринга; Если бы кто-нибудь мог помочь, это здорово!

Спасибо

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

Ответ 1

Все приведенные здесь решения верны.

Самое простое изменение заключается в том, чтобы просто включить вызов функции в элемент JSX:

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

Тем не менее, ни один из ответов (правильно) не говорит вам, почему код нарушался в первую очередь.

Для упрощенного примера, немного упростите свой код.

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

так что смысл и поведение остаются прежними. (удалить шестнадцатиричные и перемещать завитки):

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

Что делает этот код, он содержит блок, обозначенный {}, в котором вы пытаетесь вызвать функцию.

Из-за оператора return блок {} обрабатывается как объектный литерал

Литеральный объект - это список нулей или более пар имен свойств и связанных значений объекта, заключенных в фигурные скобки ({}).

который ожидает либо a: b либо a (сокращенный) синтаксис для его пар значений свойства.

// valid object
return {
  prop: 5
}

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

Однако вместо этого вы передаете вызов функции, что является недопустимым.

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

Просматривая этот код, движок предполагает, что он будет читать объект-литерал. Когда он достигнет this. , он замечает это . не является допустимым символом для имени свойства (если только вы не обертываете его в строку - см. ниже), и здесь выполняются разрывы.

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

test();

Ответ 2

Вы можете избежать этого, переписывая RecipeLists.js как чистый компонент без гражданства.

Как чистый компонент:

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;

Итак, теперь вы являетесь компонентом в основном просто функцией с параметрами.

Ответ 3

Оберните часть this.renderRecipeItems() с помощью div, она будет работать.

Причина, почему она терпит неудачу, объясняется очень хорошо @nem035 в этом ответе.

Как это:

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

И я думаю вместо:

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

Так должно быть:

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

Это изменения, которые я вижу, возможно, некоторые другие также потребуются.