Блог

У меня есть объект под названием TaskTypes, внутри объекта он выглядит следующим образом

-LJLQR7lVkbzsxAZC3JI: {code: "Pest amp; Disease", colour: "0xf2473f", deleted: null, subTypes: {…}}
-LJLQR7mZaeBNnEhdHtU: {code: "Health amp; Safety", colour: "0x8c5de4", deleted: null, subTypes: {…}}
-LJLQR7mZaeBNnEhdHtZ: {code: "Structure", colour: "0x6b8e23", deleted: null, subTypes: {…}}
-LJLQR7mZaeBNnEhdHtl: {code: "Repairs amp; Maintenance", colour: "0x66a9fb", deleted: null, subTypes: {…}}
-LJLQR7nJdpun5Tugh39: {code: "Reminders", colour: "0xf2bb61", deleted: null, subTypes: null}
-LUDgbjHzQpktk34u8-4: {code: "Sample", colour: "0x2196f3", deleted: null, subTypes: {…}}
-L_dAY_Aju0IBGwY9VVA: {code: "test", colour: "0x03a9f4", deleted: null, subTypes: null}

Первые случайные строки — это идентификатор объекта.

Я хочу, чтобы состояние идентификатора задачи обновлялось каждый раз, когда я выбираю один из этих объектов, например, если я выберу «Вредители и болезни» из выпадающего списка, идентификатор задачи будет «-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>
  

На данный момент я отображаю весь объект в своем выпадающем списке (вредители, болезни и т.д.), Но мое состояние не обновляется

Может помочь несколько изменений.

Выберите обработчик изменений

 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>
  

Более подробную информацию читайте в документах React: выберите тег