Html React Form Select选项与两个硬编码选项（其余选项已映射）

我对前端开发（尤其是React）比较陌生。我通常更像是一个后端开发人员，但我团队中的其他开发人员最近离开了公司，让我独自尝试更好地了解我们平台的整个堆栈，这是用React编写的

我们有一个具有select控件的窗体。在其当前状态下，控件有一个显式默认选项（即选择讲师），其余选项从数据库表映射。默认选项已禁用，无法作为选项选择。它确实是默认显示（这是这个故事的一个特殊用户体验要求）。我的任务是添加一个附加选项（即不适用），该选项允许填写表单的人选择该选项，这样他们就不必显式地选择用户名。这是我为表单控件实现的：

<Form.Group controlId="instructor">
   <Form.Label>{t("Primary Instructor")} - <em>{t("Optional")}</em></Form.Label>
   <Form.Control
      as="select"
      custom
      required
      disabled={!inputClass.CourseId}
      value={inputClass.InstructorId || ""}
      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
         setInputClass({
            ...inputClass,
            InstructorId: e.target.value ? parseInt(e.target.value) : null
         })
      }
   >
      <option disabled key="empty" value="">
         {t("Select an instructor")}
      </option>
      <option key="empty" value="0">
         {t("Not Applicable")}
      </option>
      {instructors.map((instructor) => {
         if (selectedCourse) {
            if (selectedCourse.OnlineOnly || isCertifiedInstructor(instructor)) {
               return (
                  <option key={instructor.UserId} value={instructor.UserId}>
                     {instructor.FirstName} {instructor.LastName}
                  </option>
               );
             }
          }
       })}
    </Form.Control>

因此，我假设，当选择值为“0”的Not Applicable时，它会将其评估为falsey并默认为“”选项

---

有人对如何避免这种情况有其他想法吗？

我也喜欢后端，有时不得不与React合作，我知道你的痛苦

JavaScript的类型强制将

null

和

0

计算为

false

。因此，在这两种情况下，

inputClass.InstructorId | | |“

将为您提供

”

。我被这件事缠住的次数比我想承认的要多

你的运气可能会更好<代码>inputClass.InstructorId？？当

输入类时，“

将求值为

”

。InstructorId为

null

，但当它为

0

时，不是

onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
   setInputClass({
      ...inputClass,
      InstructorId: e.target.value || e.target.value == "0" ? parseInt(e.target.value) : null
   })
}

value={inputClass.InstructorId || ""}