Reactjs JSX中的意外标记（React组件）

我很抱歉，如果这是一个错误的地方问这样的事情，但我找不到这个错误为我的生活。我甚至睡了一觉，今天早上又试了几个小时

这是我的错误：

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

./src/components/results\u讲师视图/每周报告\u results\u讲师.js中的

错误
模块构建失败：语法错误：C:/Users/Temple/Source/workspace/LMS/TechAcademyLMS/TechAcademyLMS/Scripts/React-Redux-App/src/components/result\u-ticator\u-view/weekly\u-report\u-results\u-ticator.js：意外标记，预期，（139:4）
137 |
138 |
>139 |}其他{
|                   ^
140 |
141 |返回（还没有每周报告）；
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);

//库
从“React”导入React，{Component}；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
//装载机
从“../../components/Loader/Loader”导入加载器；
//行动
从“../../actions/Results/Results\u讲师\u视图\u操作”导入{ResultsStructorViewAction}；
类WeeklyReportResult扩展组件{
componentDidMount（）{
//从道具/参数获取用户信息
const userInfo=this.props.match.params.value.split（'，'）；
//getWeeklyReport的url
常量url=`/SPA/getWeeklyReport？Id=${userInfo[1]}`；
this.props.resultinStructorViewAction（url）；
}
componentDidUpdate（prevProps、prevState）{
//将loaded设置为true
if（this.state.Loaded==false）{
this.setState（{Loaded:true}）；
}
}
render（）{
//检查数据是否存在
如果（this.props.resultsInstructorView>[0]）{
const renderList=this.props.resultinStructorView.map（（项，i）=>{
返回(
//由于映射，控制台中出现错误的键

提交日期：{item.Date}

课程位置：{item.CoursePosition}

需要帮助：{item.NeedHelp}

所需材料和用品：{item.MaterialsAndSupplies}

会议组：{item.Meetups}

积极的经历：{item.Positives}

投诉：{item.Complaints}

学习时数：{item.hoursrstuded}

工作搜索：{item.JobSearch}

引用：{item.reference}

杂项：{item.misscellaneous}

反馈
);
});
} 
//构建已响应的每日报告
const renderAllList=this.props.resultsInstructorView.map（（项，i）=>{
如果（item.Feedbacks.length>0）{
返回(

提交日期：{item.Date}
课程位置：{item.CoursePosition}
需要帮助：{item.NeedHelp}
材料和用品：{item.MaterialsAndSupplies}
阳性：{item.Positives}
投诉：{item.Complaints}
研究小时数：{item.hoursvestuded}
工作搜索：{item.JobSearch}
引用：{item.reflection}
杂项：{item.misscellaneous}
讲师反馈：{item.Feedbacks[0].Content}
);
}
返回(
周报
学生姓名：{this.props.match.params.value.split（'，）[2]}
{renderList}

过去的报告
{renderAllList}
);
}否则{
返回（还没有每周报告）；
}
}
}
函数MapStateTops（状态）{
返回{ResultsStructorView:state.ResultsStructorView}；
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
ResultsStructorViewAction
}，派遣）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（WeeklyReportResult）；

else语句应位于第二个return语句之前，如下所示：

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

---

看起来您应该首先修复代码的格式-这将有助于更容易阅读和查找问题：）

---

}

位于

else

之前的

当前与

resultsInstructorview.map（）

调用的

{

匹配，因此这不是有效的语法。

老实说，您的map函数似乎缺少一个右括号。正确的代码缩进有助于查找类似的错误

---

如果这确实是您想要的方式，那么这就是错误所指出的。您当前的代码有点像这样：

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

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

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

if（item.Feedbacks.length>0）{
返回（…）
} 
返回（…）
否则{
返回（…）
}

中间的返回语句使else语句无法访问

您需要使用类似于<