React中根据classroomId选择调用接口的语法问题及解决

你的问题出在三元表达式的写法上，导致无法正确链式调用Promise的.then()和.catch()方法，我来帮你拆解问题并给出修复方案：

原代码的核心错误 #

你把三元表达式放在了一对额外的大括号{ ... }里，JavaScript会把这个结构解析成代码块或者对象字面量，而不是一个能返回Promise的表达式。这就导致后面的.then()找不到对应的Promise对象，自然会报错。另外，classroomId !== undefined的判断不够严谨——如果classroomId是空字符串、null这类“无意义”的值，这个判断会误判为有值，可能不符合你的业务预期。

修复三元表达式的写法 #

你不需要改成if-else也能解决问题，只需要去掉多余的大括号，把三元表达式作为一个整体返回Promise，就能正常链式调用了：

handleFormSubmit(data) {
  const { 
    importUserToClassroom, 
    importUsers, 
    addFlashMessage, 
    formatErrors, 
    showUiBlocked, 
    hideUiBlocked, 
    match: {params: {classroomId}}, 
  } = this.props;
  showUiBlocked();
  const users = userDataToList(data);

  // 用括号包裹三元表达式，确保返回Promise对象
  (classroomId != null ? 
    importUserToClassroom({ users, classroomId }) : 
    importUsers({users})
  )
  .then(() => {
    hideUiBlocked();
    addFlashMessage('Users imported successfully', 'success');
    this.context.router.history.push('/users');
  })
  .catch(err => {
    hideUiBlocked();
    if (err.status !== 409) {
      return formatErrors(err).then(err => {
        this.setState({ errors: err });
      });
    } else {
      this.setState({ errors: { usernames: err.data.message } });
    }
  });
}

这里用classroomId != null代替了原有的判断，它会同时排除null和undefined的情况，更贴合“classroomId无值”的业务场景。

关于你最终的if-else写法 #

你改成的if-else版本是完全可行的，而且如果后续业务逻辑变得更复杂（比如需要增加更多分支判断），if-else的可读性会比三元表达式更好。两种写法各有优劣，你可以根据实际场景选择。

内容的提问来源于stack exchange，提问作者user8227859