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

Question

我正在开发一个 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);

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

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

Answer 1

看起来你有一个悬而未决的if声明。在箭头函数中使用大括号，或者使用三元表达式。onClick={(initialRank) => { //<-- add brace bracket&nbsp; &nbsp; this.props.increaseCategoryRank(category, categoryClicked)&nbsp; &nbsp; //with no brace brackets, function would end on the line above.&nbsp;&nbsp; &nbsp; //The rest is dangling, hence the error&nbsp; &nbsp; if(initialRank === -1) {&nbsp; &nbsp; &nbsp; &nbsp; this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.increaseCategoryRank(menuCategory, !categoryClicked) : null)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; }}}