Question

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

最初，我只是定义了变量，然后运行了我的return函数，但后来意识到我需要添加一些逻辑来根据来自用户的请求来更改变量。当我添加此if/else时，该功能已经崩溃了。以下是相关代码，第一个工作第二个不起作用。

WORKS：

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是块范围的。通过将这些let放在块中，可以使它们在父作用域中不可访问。

将let移动到您需要的任何内容（看起来像resultsHeader和popularCoachesHeader）在之外

这些块：

E.g：

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

React - 条件导致不分配变量

1 个答案: