ReactJS：解析错误：意外的令牌，预期的“}”答案

【问题标题】：ReactJS: Parsing error: Unexpected token, expected "}"ReactJS：解析错误：意外的令牌，预期的“}”
【发布时间】：2020-04-20 09:53:08
【问题描述】：

我正在开发一个 React 应用程序，我正在使用 Redux 来存储状态。我有以下代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increaseCategoryRank, decreaseCategoryRank } from '../../redux/menu/menu.actions';
import './category-arrows.styles.scss';

class CategoryArrows extends Component {

    render() {

        const { category } = this.props;
        const categoryClicked = true;
        const initialRank = category.rank;

        return (
            <div className="arrows-container">
                <div className="up-arrow" onClick={
                    (initialRank) =>
                    this.props.increaseCategoryRank(category, categoryClicked)

                    if(initialRank === -1) {
                        this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.increaseCategoryRank(menuCategory, !categoryClicked) : null)

                    } else {
                        return null;
                    }
                }></div>
                <div className="category-rank">
                    <p>{category.rank}</p>
                </div>
                <div className="down-arrow" onClick={() => this.props.decreaseCategoryRank(category,  categoryClicked)}></div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    menu: state.menu
})

export default connect(mapStateToProps, { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);

点击up-arrow div 时，我正在调用一个函数。但是，我收到以下错误：

我不确定为什么会收到此错误或如何解决此问题。任何见解都值得赞赏。

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

看起来你有一个悬空的if 声明。在箭头函数中使用大括号，或者使用三元表达式。

onClick={(initialRank) => { //<-- add brace bracket
    this.props.increaseCategoryRank(category, categoryClicked)
    //with no brace brackets, function would end on the line above. 
    //The rest is dangling, hence the error
    if(initialRank === -1) {
        this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.increaseCategoryRank(menuCategory, !categoryClicked) : null)

    } else {
        return null;
    }
}}

【讨论】：