Javascript React-条件导致未分配变量

对于我在React中的

返回

函数之前定义的变量，我得到以下错误

x未定义

。变量调用我在组件顶部导入的常量

最初，我只是简单地定义变量，然后运行我的

return

函数，但后来意识到我需要添加一些逻辑来根据来自用户的请求更改变量。当我添加此

if/else

时，该功能中断。这是相关代码，第一个有效，第二个无效

作品：

else if (this.state.form_submitted == true) {
      let parentCat = PERSONAL_IMPROVEMENTS[this.state.filters.categories],
          childCat =  PERSONAL_IMPROVEMENT_OPTIONS[this.state.filters.categories][this.state.filters.personal_categories],
          resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
            ? (<h3 className="text-slate">Based on your request for a coach to help you with {parentCat} - specifically with {childCat}, we recommend these coaches</h3>)
            : null,
          popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
            ? (<h3 className="text-slate">Most Popular Coaches</h3>)
            : null;

      return(
        <div className="">
          <div className="search-results">
            {b2b_link}
            {resultsHeader}
            <div className="coach-card-list">
              {this.renderCoaches()}
            </div>
            {popularCoachesHeader}
            <div className="coach-card-list">
              {this.renderPopularCoaches()}
            </div>
            <div className="revise-recommendation-form">
              {revise_recommendations}
            </div>
          </div>
          {warning_modal}
        </div>
      )
    }

else if（this.state.form_submitted==true）{
let parentCat=PERSONAL_profections[this.state.filters.categories]，
childCat=PERSONAL\u-IMPROVEMENT\u-OPTIONS[this.state.filters.categories][this.state.filters.PERSONAL\u-categories]，
resultsHeader=this.state.coach！=null&&this.state.coach.length>0
？（根据您对教练的要求，帮助您学习{parentCat}，特别是{childCat}，我们推荐这些教练）
：null，
popularCoachesHeader=this.state.popular\u coach！=null&&this.state.popular\u coach.length>0
？（最受欢迎的教练）
：null；
返回(
{b2b_链接}
{resultsHeader}
{this.renderCoaches（）}
{popularCoachesHeader}
{this.renderPopularCoaches（）}
{修订建议}
{警告_模式}
)
}

这不起作用：

else if (this.state.form_submitted == true) {
      if (this.state.filters.client_type == "my_team_or_employees") {
        debugger
        let b2bChallenge = B2B_CHALLENGE_OPTIONS[this.state.filters.b2b_challenge],
            resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
              ? (<h3 className="text-slate">Based on your request for a coach to help your team with {b2bChallenge}, we recommend these coaches</h3>)
              : null,
            popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
              ? (<h3 className="text-slate">Most Popular Coaches</h3>)
              : null;
      }
      else {
        debugger
        let parentCat = PERSONAL_IMPROVEMENTS[this.state.filters.categories],
            childCat =  PERSONAL_IMPROVEMENT_OPTIONS[this.state.filters.categories][this.state.filters.personal_categories],
            resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
              ? (<h3 className="text-slate">Based on your request for a coach to help you with {parentCat} - specifically with {childCat}, we recommend these coaches</h3>)
              : null,
            popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
              ? (<h3 className="text-slate">Most Popular Coaches</h3>)
              : null;
      }

      return(
        <div className="">
          <div className="search-results">
            {b2b_link}
            {resultsHeader}
            <div className="coach-card-list">
              {this.renderCoaches()}
            </div>
            {popularCoachesHeader}
            <div className="coach-card-list">
              {this.renderPopularCoaches()}
            </div>
            <div className="revise-recommendation-form">
              {revise_recommendations}
            </div>
          </div>
          {warning_modal}
        </div>
      )
    }

else if（this.state.form_submitted==true）{
if（this.state.filters.client_type==“我的团队或员工”）{
调试器
让B2BCchallenge=B2B_CHALLENGE_选项[this.state.filters.B2B_CHALLENGE]，
resultsHeader=this.state.coach！=null&&this.state.coach.length>0
？（根据您对教练的要求，我们推荐这些教练帮助您的团队进行{B2B挑战}）
：null，
popularCoachesHeader=this.state.popular\u coach！=null&&this.state.popular\u coach.length>0
？（最受欢迎的教练）
：null；
}
否则{
调试器
let parentCat=PERSONAL_profections[this.state.filters.categories]，
childCat=PERSONAL\u-IMPROVEMENT\u-OPTIONS[this.state.filters.categories][this.state.filters.PERSONAL\u-categories]，
resultsHeader=this.state.coach！=null&&this.state.coach.length>0
？（根据您对教练的要求，帮助您学习{parentCat}，特别是{childCat}，我们推荐这些教练）
：null，
popularCoachesHeader=this.state.popular\u coach！=null&&this.state.popular\u coach.length>0
？（最受欢迎的教练）
：null；
}
返回(
{b2b_链接}
{resultsHeader}
{this.renderCoaches（）}
{popularCoachesHeader}
{this.renderPopularCoaches（）}
{修订建议}
{警告_模式}
)
}

让

是块作用域。通过将那些

let

s放入块中，可以使它们在父作用域中不可访问

将

let

s移动到这些块之外，以获取所需的任何内容（看起来像

resultheader

和

popularCoachesHeader

）：

例如：

let resultheader，popularCoachesHeader；//**感动的
if（this.state.filters.client_type==“我的团队或员工”）{
调试器
//注意这是三个独立的语句（中间有分号），
//而不是一个带逗号的长'let'语句
让b2bcchallenge=B2B_CHALLENGE_选项[this.state.filters.B2B_CHALLENGE]；
resultsHeader=this.state.coach！=null&&this.state.coach.length>0
？（根据您对教练的要求，我们推荐这些教练帮助您的团队进行{B2B挑战}）
：null；
popularCoachesHeader=this.state.popular\u coach！=null&&this.state.popular\u coach.length>0
？（最受欢迎的教练）
：null；
}
否则{
调试器
//再说一遍，单独的语句，而不是一个长的'let'语句
let parentCat=PERSONAL_profections[this.state.filters.categories]；
让childCat=PERSONAL\u-IMPROVEMENT\u-OPTIONS[this.state.filters.categories][this.state.filters.PERSONAL\u-categories]，
resultsHeader=this.state.coach！=null&&this.state.coach.length>0
？（根据您对教练的要求，帮助您学习{parentCat}，特别是{childCat}，我们推荐这些教练）
：null；
popularCoachesHeader=this.state.popular\u coach！=null&&this.state.popular\u coach.length>0
？（最受欢迎的教练）
：null；
}

让

是块作用域。通过将那些

let

s放入块中，可以使它们在父作用域中不可访问

将

let

s移动到这些块之外，以获取所需的任何内容（看起来像

resultheader

和

popularCoachesHeader

）：

例如：

let resultheader，popularCoachesHeader；//**感动的
if（this.state.filters.client_type==“我的团队或员工”）{
调试器
//注意这是三个独立的语句（中间有分号），
//而不是一个带逗号的长'let'语句
让b2bcchallenge=B2B_CHALLENGE_选项[this.state.filters.B2B_CHALLENGE]；
resultsHeader=this.state.coach！=null&&this.state.coach.length>0
？（根据您对教练的要求，我们推荐这些教练帮助您的团队进行{B2B挑战}）
：null；
popularCoachesHeader=this.state.popular\u coach！=null&&this.state.popular\u coach.length>0
？（Mos）
let resultsHeader, popularCoachesHeader; // ** Moved
if (this.state.filters.client_type == "my_team_or_employees") {
  debugger
  // Note this is now three separate statements (with semicolons in-between),
  // instead of one long `let` statement with commas
  let b2bChallenge = B2B_CHALLENGE_OPTIONS[this.state.filters.b2b_challenge];
  resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
    ? (<h3 className="text-slate">Based on your request for a coach to help your team with {b2bChallenge}, we recommend these coaches</h3>)
    : null;
  popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
    ? (<h3 className="text-slate">Most Popular Coaches</h3>)
    : null;
}
else {
  debugger
  // And again, separate statements, not one long `let` statement
  let parentCat = PERSONAL_IMPROVEMENTS[this.state.filters.categories];
  let childCat =  PERSONAL_IMPROVEMENT_OPTIONS[this.state.filters.categories][this.state.filters.personal_categories],
  resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
    ? (<h3 className="text-slate">Based on your request for a coach to help you with {parentCat} - specifically with {childCat}, we recommend these coaches</h3>)
    : null;
  popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
    ? (<h3 className="text-slate">Most Popular Coaches</h3>)
    : null;
}