Ошибка синтаксического анализа: неожиданный токен, ожидается "{"

Question

src / GamesList.js

import React from 'react';
import games from './reducers/games';

export default function GamesList({games}) => {
    const emptyMessage = (
        <p>There are no games yet in your collection</p>
    );

    const gamesList=(
        <p>games list</p>
    );
    return (
        <div>
            {games.length === 0 ? emptyMessage : gamesList}

            </div>

    );
}

GamesList.propTypes={
    games: React.PropTypes.array.isRequired
}

Есть проблема с моим кодом ... Это выдает следующую ошибку ..

Строка 4:44: Ошибка синтаксического анализа:Неожиданный токен, ожидаемый "{"

импорт игр из './reducers/games';функция экспорта по умолчанию GamesList ({games}) => {^ const emptyMessage = (6 |

В вашей коллекции пока нет игр

);

Answer 1

Если вы хотите использовать стрелка , то она должна выглядеть следующим образом.

import React from 'react';
import games from './reducers/games';

const GamesList = ({games}) => {
    const emptyMessage = (
        <p>There are no games yet in your collection</p>
    );

    const gamesList=(
        <p>games list</p>
    );
    return (
        <div>
            {games.length === 0 ? emptyMessage : gamesList}

            </div>

    );
}

GamesList.propTypes={
    games: React.PropTypes.array.isRequired
}

export default GamesList;

ИЛИ

Вы можете использовать обычный function вот так ...

export default function GamesList({games}) {
   // ....
   // ....
}

Answer 2

Вы смешиваете два разных синтаксиса объявления функции.

Он должен быть в синтаксисе объявления функции:

export default function GamesList({games}) {
    //function body
}

или в синтаксисе функции стрелки:

export default const GamesList = ({games}) => {
    //function body
}

Обратите внимание, что во втором примере (синтаксис «функция стрелки») имя функции объявлено как константа. Оба могут быть использованы, но они не могут быть смешаны в одном объявлении.

Answer 3

Удалите «=>» в функции экспорта по умолчанию GamesList ({games}) => {}, и она должна работать.