JSX 中的意外令牌（React 组件）

Question

很抱歉，如果这是在错误的地方提出这样的问题，但我一生都找不到这个错误。我什至睡在上面，今天早上又试了几个小时。

这是我的错误：

ERROR in ./src/components/results_instructor_view/weekly_report_results_instructor.js
Module build failed: SyntaxError: C:/Users/Temple/Source/Workspaces/LMS/TechAcademyLMS/TechAcademyLMS/Scripts/React-Redux-App/src/components/results_instructor_view/weekly_report_results_instructor.js: Unexpected token, expected , (139:4)

  137 |
  138 |
> 139 |                 } else {
      |                   ^
  140 |
  141 |                         return (<h6>No weekly reports yet</h6>);
  142 |                 }

 @ ./src/containers/main_display_container.js 85:40-121
 @ ./src/components/app.js
 @ ./src/routes.js
 @ ./src/Index.js

这是我的代码：

// libraries
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

// Loader
import Loader from '../../components/loader/loader';

//actions
import { resultsInstructorViewAction } from '../../actions/Results/results_instructor_view_action';




class WeeklyReportResult extends Component {

    componentDidMount() {
        // getting the user info from the props/params
        const userInfo = this.props.match.params.value.split(',');
        // url for the getWeeklyReport
        const url = `/SPA/getWeeklyReport?Id=${userInfo[1]}`;

        this.props.resultsInstructorViewAction(url);
    }

    componentDidUpdate(prevProps, prevState) {

        // set loaded to true
        if (this.state.Loaded === false) {

            this.setState({ Loaded: true });
        }

    }



    render() {


        // checking to see if the data exists
        if (this.props.resultsInstructorView > [0]) {
            const renderList = this.props.resultsInstructorView.map((item, i) => {
                return (
                    // Key for error in console due to mapping
                    <div key={i}>
                        <hr className="style-two" />
                        <h4>Date Submitted: </h4><p>{item.Date}</p>
                        <h5>Course Position: </h5><p>{item.CoursePosition}</p>
                        <h5>Need Help: </h5><p>{item.NeedHelp}</p>
                        <h5>Materials and Supplies Needed: </h5><p>{item.MaterialsAndSupplies}</p>
                        <h5>Meetups: </h5><p>{item.Meetups}</p>
                        <h5>Positive Experiences: </h5><p>{item.Positives}</p>
                        <h5>Complaints: </h5><p>{item.Complaints}</p>
                        <h5>Hours Studied: </h5><p>{item.HoursStudied}</p>
                        <h5>Job Search: </h5><p>{item.JobSearch}</p>
                        <h5>Referral: </h5><p>{item.Referral}</p>
                        <h5>Miscellaneous: </h5><p>{item.Miscellaneous}</p>


                    <button type="button" className="btn btn-info btn-lg" onClick={this.toggleModal} id={item.DailyReportId}>
                                Give Feedback
                    </button>
                    </div>
            );
        });
    } 




                    // building the already responded daily reports
const renderAllList = this.props.resultsInstructorView.map((item, i) => {
    if (item.Feedbacks.length > 0) {

        return (

            <Panel key={i} header={item.Date} eventKey={i} bsStyle="primary" className="text-center">
                <hr className="style-two" />
                <div className="text-left">
                    <h6><strong>Date Submitted :</strong> {item.Date}</h6>
                    <h6><strong>Course Position : </strong>{item.CoursePosition}</h6>
                    <h6><strong>Need Help : </strong>{item.NeedHelp}</h6>
                    <h6><strong>Materials and Supplies :</strong> {item.MaterialsAndSupplies}</h6>
                    <h6><strong>Positives : </strong>{item.Positives}</h6>
                    <h6><strong>Complaints :</strong> {item.Complaints}</h6>
                    <h6><strong>Hours Studied :</strong> {item.HoursStudied}</h6>
                    <h6><strong>Job Search :</strong> {item.JobSearch}</h6>
                    <h6><strong>Referral :</strong> {item.Referral}</h6>
                    <h6><strong>Miscellaneous :</strong> {item.Miscellaneous}</h6>
                    <h6><strong>Instructor Feedback : </strong><mark>{item.Feedbacks[0].Content}</mark></h6>
                </div>

            </Panel>
        );
}






            return (
                <div className="container text-center">

                    <div className="row">
                        <h1>Weekly Reports</h1>
                        <h3>Student Name: </h3><h5>{this.props.match.params.value.split(',')[2]}</h5>

                    </div>

                    <div className="col-sm-12 text-left">

                        {renderList}


                        <hr className="style-two" />
                            <h2 className="text-center">Past Reports</h2>

                            <Accordion>
                                {renderAllList}
                            </Accordion>
                            <FeedbackModal
                                show={this.state.isOpen}
                                toggleModal={this.toggleModal}
                                name={this.props.match.params.value.split(',')[0]}
                                id={this.props.match.params.value.split(',')[1]}
                                weeklyReportId={this.state.tempId}

                            />

                    </div>

                </div>

            );


        } else {

            return (<h6>No weekly reports yet</h6>);
        }

    }
    }

function mapStateToProps(state) {
    return { resultsInstructorView: state.ResultsInstructorView };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        resultsInstructorViewAction
    }, dispatch);
}


export default connect(mapStateToProps, mapDispatchToProps)(WeeklyReportResult);

Answer 1

老实说，您的地图功能似乎缺少一个右括号。适当的代码缩进有助于发现这样的错误。

---

如果这确实是您想要的方式，那么这就是错误所指出的。你目前有一个看起来有点像这样的代码：

  if (item.Feedbacks.length > 0) { 
    return (<Panel>...</Panel>) 
  } 

  return (<div className="container text-center">...</div>) 

  else { 
    return (<h6>...</h6>) 
  }

中间的 return 语句使 else 语句无法访问。

您需要使用else if 之类的内容来编辑该中间返回语句，或者将 else 子句放在中间返回语句之上。

虽然这比您的问题更广泛，但它实际上可能会解决它。看起来那些其他语句根本不应该出现在您的 map 函数中。

Answer 2

看起来您首先应该修复该代码的格式 - 这将有助于更容易阅读和发现问题:)

else 之前的 } 目前与 resultsInstructorview.map() 调用的 { 匹配，因此这不是有效的语法。

Answer 3

else 语句应该放在第二个 return 语句之前，如下所示：

render() {
   if (this.props.resultsInstructorView > [0]) {
 return (
//code here
);
} else {
return (
  //code here.
 );
}