Reactjs 根据下拉菜单中的对象选择更新状态

我有一个名为TaskTypes的对象，在对象内部，它看起来像这样

-LJLQR7lVkbzsxAZC3JI:{代码：“害虫和疾病”，颜色：“0xf2473f”，删除：null，子类型：{…}
-LJLQR7MZAEBNNEHTU:{代码：“健康与安全”，颜色：“0x8c5de4”，删除：null，子类型：{…}
-LJLQR7MZAEBNNEHTZ:{代码：“结构”，颜色：“0x6b8e23”，删除：null，子类型：{…}
-LJLQR7MZAEBNNEHTL:{代码：“修理和维护”，颜色：“0x66a9fb”，删除：null，子类型：{…}
-LJLQR7nJdpun5Tugh39:{代码：“提醒”，颜色：“0xf2bb61”，删除：null，子类型：null}
-LUDGBJHZQPKT34U8-4:{代码：“样本”，颜色：“0x2196f3”，删除：空，子类型：{…}
-L_dAY_Aju0IBGwY9VVA:{代码：“测试”，颜色：“0x03a9f4”，删除：空，子类型：空}

第一个随机字符串是对象Id

我希望每次选择其中一个对象时taskId的状态都会更新，例如，如果从下拉列表中选择“害虫和疾病”，taskId将为“-LJLQR7lVkbzsxAZC3JI”

我已经创建了一个函数来实现这一点，但是状态没有被更新

this.state = { id: "", taskId: null,
               taskSubId: null,
               taskSubSubId: null }

setTaskType = (id: string) => {
        console.log("ID:", id)
        console.log("id.length:", id.length)
        console.log("stateTaskId", (this.state as any).taskId)
        if (id.length > 0) {
            console.log("setTaskTypeFunction", this.props.metadata.TaskTypes)
            this.setState({ id: id, taskId: id, taskSubId: null, taskSubSubId: null, taskType: Object.assign({}, this.props.metadata.TaskTypes[id]) })
        } 
    }

这是我的JSX

<select className="input-field-slider dropdown w-select" onClick={() => this.setTaskType("")}>
   <option key={taskId} value={taskId}>Select A Category</option>
     {
        Object.keys(taskTypes)
         .sort((a, b) => taskTypes[a].code.toLowerCase() > 
                     taskTypes[b].code.toLowerCase() ? 1 : -1)                                                      
          .map(taskId =>
<option onClick={() => this.setTaskType(taskId)} value={taskId} key={taskId}>{taskTypes[taskId].code}</option>)}
</select>

this.setTaskType（“”）}>
选择一个类别
{
Object.key（任务类型）
.sort（（a，b）=>taskTypes[a].code.toLowerCase（）>
任务类型[b]。代码。toLowerCase（）？1:-1）
.map（任务ID=>
this.setTaskType（taskId）}value={taskId}key={taskId}>{taskTypes[taskId].code}

---

到目前为止，我正在下拉列表中显示整个对象（病虫害等），但我的状态没有更新

一些修改可能会有所帮助

选择更改处理程序

setTaskType = (event) => {
  const id = event.target.value;
  // continue with the rest of code
}

JSX选择元素

<select className="input-field-slider dropdown w-select" value={this.state.taskId} onChange={this.setTaskType}>
  <option value=''>Select A Category</option>
    {Object.keys(taskTypes)
      .sort((a, b) => taskTypes[a].code.toLowerCase() > 
                     taskTypes[b].code.toLowerCase() ? 1 : -1)                                                      
      .map(taskId => 
        <option value={taskId} key={taskId}>{taskTypes[taskId].code}</option>
    )}
</select>

选择一个类别
{Object.keys（任务类型）
.sort（（a，b）=>taskTypes[a].code.toLowerCase（）>
任务类型[b]。代码。toLowerCase（）？1:-1）
.map（任务ID=>
{taskTypes[taskId].code}
)}

阅读更多详细信息，请访问