React - 条件导致变量不被分配

Question

我收到以下错误 x is not defined，对于 我 在 React 中我的 return 函数之前定义的变量。变量调用我在组件顶部导入的常量。

最初，我只是简单地定义变量，然后运行我的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) {
      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>
      )
    }

Answer 1

let 是块作用域。通过将这些 lets 放在块中，您可以使它们在父范围内无法访问。

将lets 移动到您需要的任何东西（看起来像resultsHeader 和popularCoachesHeader）在这些块之外：

例如：

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;
}