Question

如果我在控制reactjs页面内页面的容器中使用let或const，则会导致错误。如果我使用var它可以正常工作。我缺少什么理解？

export default CareerHistoryContainer = createContainer(({match, isCandidate, isAdmin}) => {
  if (isCandidate) {
    var profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
    var loading = !profileCandidateCollectionHandle.ready();
    var profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    var profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
  }

  if (isAdmin) {
    var adminProfileCandidatesubscribeSubscribe = Meteor.subscribe('admin.candidateProfile', (match.params.userId));
    var loading = !adminProfileCandidatesubscribeSubscribe.ready();
    var profileCandidateCollection = ProfileCandidate.findOne({userId: match.params.userId});
    var profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
  }

  return {
    loading,
    profileCandidateCollection,
    profileCandidateCollectionExist,
    profileCandidate: profileCandidateCollectionExist
      ? profileCandidateCollection
      : {}
  };
}, CareerHistoryFormPage);

Answer 1

在ES6中，let和const变量定义是块范围的，而var则不是。

if (isCandidate) {
    let profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
    let loading = !profileCandidateCollectionHandle.ready();
    let profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    let profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
    // Here, the 4 variables are only visible inside the block
}

// Here, you can't see, use or modify them
// so if you do like
return loading;

// will return exception: `loading` not defined

if (isCandidate) {
    var profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
    var loading = !profileCandidateCollectionHandle.ready();
    var profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    var profileCandidateCollectionExist = !loading && !!profileCandidateCollection;

}
// Here, the 4 variables are kept, you can do everything you want on them
// so if you do like
return loading;

// will return the right value

详情请见：http://exploringjs.com/es6/ch_variables.html

对于您的示例，您可以执行以下操作来解决问题：

export default CareerHistoryContainer = createContainer(({match, isCandidate, isAdmin}) => {
    // declaring here, variables will only be seen 
    // inside this block and sub blocks
    let profileCandidateCollectionHandle;
    let loading;
    let profileCandidateCollection;

    if (isCandidate) {
        profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
        loading = !profileCandidateCollectionHandle.ready();
        profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    }

    if (isAdmin) {
        profileCandidateCollectionHandle = Meteor.subscribe('admin.candidateProfile', (match.params.userId));
        loading = !profileCandidateCollectionHandle.ready();
        profileCandidateCollection = ProfileCandidate.findOne({userId: match.params.userId});

    }

    let profileCandidateCollectionExist = !loading && !!profileCandidateCollection;

    return {
        loading,
        profileCandidateCollection,
        profileCandidateCollectionExist,
        profileCandidate: profileCandidateCollectionExist
             ? profileCandidateCollection
             : {}
    };
}, CareerHistoryFormPage);

如何在if语句中使用es6来let或const

1 个答案: