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

    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;

    }

}}