JSX中的意外令牌（React Component）

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

else語句第二return語句之前應該去，就像這樣：

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

Answer 2

外貌就像你第一次應該努力修正該代碼的格式 - 這將有助於更容易閱讀和查找我ss）:)

之前的else當前匹配{調用resultsInstructorview.map()，所以這是不合法的語法。

Answer 3

說實話，它似乎是你缺少你的地圖功能的右括號。正確的代碼縮進有助於查找類似這樣的錯誤。

---

如果這真的是你想要的方式，那麼這就是錯誤指出的。您目前的代碼看起來有點像這樣：

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

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

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

中間返回語句使得else語句無法訪問。

您需要爲中間返回語句編輯一個類似else if的東西，或將else子句放在中間返回語句的上方。

雖然這比你的問題稍寬一點，但它實際上可能會解決它。看起來這些其他陳述根本不應該在你的map函數中。