javascript - react : Map an array inside object

Question

我试图(在选择中)显示议程的值，该议程是对象内的数组。

所以我想要获得的是这样的过程:用户选择一个经理-->用户选择有关该经理的议程值(这个过程有两个不同的选择)。

我的问题是如何处理渲染中的第二个选择。

我的对象是这样的:

manager:  [{…}]
0:
  12:
  name: "Name1"
  surname: "Surname1"
  agenda: Array(2)
       0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
       1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
  length: 2
  __proto__: Array(0)
  __proto__: Object

我的代码是:

handleChangeManager = (e) => {
      const manager_id = e.target.value;
      console.log("manager_id: ", manager_id)
      this.setState({manager_id : manager_id})
     this.agenda(manager_id)
    }

// I have tried this to recover the agenda's information about the manager choosen. 
    agenda(manager_id)
    {
      let agendas = this.props.managers[0][manager_id].agenda
      let mappingAgenda = agendas && agendas.length && agendas.map((agenda) => (
       console.log(agenda.date)

      ))
    }

render() {
         let managers = this.props.managers
         console.log("manager: ", managers)

<label>Manager</label>
            <div className="bootstrap-select-wrapper">
            <select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
            <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
            {managers && managers.length && Object.entries(managers[0]).map(([k, v]) => (
              <option 
                key={k}  
                value={k}  
                name="manager_id" >
                {v.name} {v.surname}
              </option>
            ))}
            </select>

// so there I should create a select about the agenda (for example allowing the user to choose the date)

选择经理后，如何创建有关数据的选择？

Answer 1

您需要创建另一个选择，它将根据经理的选择填充它来向您显示选项

此外，由于管理器是一个数组，因此请使用 managers.map 而不是 Object.entries(manager).map

handleChangeManager = (e) => {
  const manager_id = e.target.value;
  console.log("manager_id: ", manager_id)
  this.setState({manager_id : manager_id})
}

handleChangeAgenda = (e) => {
  const manager = this.props.managers[0][this.state.manager_id];
  const index = e.target.value
  this.setState({agenda : manager.agendas[index]})
}
render() {
   let managers = this.props.managers
   console.log("manager: ", managers)
   const manager_id = this.state.manager_id;
   const selectedManager = manager_id? mangers[0][manger_id];
   const agendas = (selectedManager || {}).agendas;
   return (
        <label>Manager</label>
        <div className="bootstrap-select-wrapper">
          <select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
          <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
          {managers && managers.length && Object.entries(managers[0]).map(([k, v]) => (
            <option 
              key={k}  
              value={k}  
              name="manager_id" >
              {v.name} {v.surname}
            </option>
          ))}
          </select>
          <select title="Choose Agenda" onChange={(event) => this.handleChangeAgenda(event)}>
          <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
          {agendas && agendas.map((v, index) => (
            <option 
              key={k}  
              value={index}  
              name="manager_id" >
              {v.start_at} - {v.end_at}
            </option>
          ))}
          </select>
        </div>
   )   
}