Как достать информацию с иерархического уровня по клику?

Question

[Nik Vik]

Имеется иерархическая структура данных Контейнер–Ряд–Ячейка. На уровнях Контейнер и Ряд имеются только индексы. Практически значимые данные находятся на уровне Ячейка. Данные поставляются в формате JSON и имеют следующую структуру:

[{ pillar: № стеллажа, 
   data: [ { shelf: № полки, 
             data: [ { seat: № места, 
                       data: { busy: false/true, 
                               size: 1/2; 
                               status: "string"; 
                               model: "string"
                              } 
                     },...
                   ]
           },... 
         ]
 },...
]

Для отображения иерархии создаю три React-компонента:

class PillarListItem extends Component {

      render () {
        const {pillar, showMachine} = this.props;

        return (
            <div className="machines-pillar">
              <table className="pillar">
                <caption>
                  Стеллаж {pillar.pillar}
                </caption>
                <tbody>
      	        {
      	          pillar.data.map((s , index) => {
      	            return <ShelfListItem
                      key = {s.shelf}
      	              shelf={s}
      	              showShelfMachine = {() => showMachine(s)}
      	            />
      	          })
      	        }
                </tbody>
              </table>
            </div>
        )
      }
    }

    class ShelfListItem extends Component {

      render () {
        const {shelf, showShelfMachine} = this.props;

        return (
        	<tr>
    	        {
    	          shelf.data.map((m , index) => {
    	            return <PlaceListItem
                    key = {m.seat}
    	              seat={m}
    	              showPlaceMachine = {() => showShelfMachine(m)}
    	            />
    	          })
    	        }
    	    </tr>
        )
      }
    }

    class PlaceListItem extends Component {

      render () {
        const {seat, showPlaceMachine} = this.props;

        if (seat.data.busy) {
          return (
            <td className={seat.data.status} colSpan={seat.data.size} onClick={showPlaceMachine}>{seat.data.id}</td>
          )
        } else {
          return (
            <td className={seat.data.status} colSpan={seat.data.size}>{seat.data.model}</td>
          )
        }
      }
    }

Отображение иерархической структуры оформляю следующим вызовом:

class Pillars extends Component {

  constructor (props) {
    super(props);
    this.state = {
      setterMachines: gon.setterMachines,
      selectedMachine: null
    }
  }

  showPillarHandler = (machine) => {
    this.setState({
      selectedMachine: machine.data
    })
  }

  tooglePopup = () => {
    this.setState({
      selectedMachine: null
    })
  }

  render () {
    const {selectedMachine, setterMachines} = this.state;

    return (
      <div className="container-machines">           
        {
          setterMachines.map((p,index) => {
            return <PillarListItem
              key = {p.pillar}
              pillar={p}
              showMachine = {() => this.showPillarHandler(p.data[1].data[1])}
            />
          })
        }
        
        {selectedMachine &&
          <MachineShow toogle={this.tooglePopup} machine={selectedMachine}/>
        }
      </div>
    )
  }
}

Стоит задача в получении расшифровки с уровня Ячейки при клике на неё.

Проблема. Как программно получить индексы Ряда и Ячейки для строки кода
this.showPillarHandler(p.data[индекс Ряда].data[индекс Ячейки]) ?

Answer 1

[0xD34F]

Как программно получить индексы Ряда и Ячейки для строки кода
this.showPillarHandler(p.data[индекс Ряда].data[индекс Ячейки]) ?

А не надо никаких индексов получать. Передавайте нужный объект в обработчик в самом нижнем компоненте вашей иерархии.

В компоненте Pillars делаете так: showMachine={this.showPillarHandler}.
В PillarListItem так: showShelfMachine={showMachine}.
И в ShelfListItem аналогично: showPlaceMachine={showShelfMachine}.
Наконец, в PlaceListItem: onClick={() => showPlaceMachine(seat)}.

P.S. Погуглите, что такое redux.

Comments

[Nik Vik]

То, что вы рекомендуете приводит к ошибке:
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[0xD34F]

Nik Vik, значит, вы что-то неправильно делаете. Убедитесь, что нигде не пытаетесь при передаче функции в качестве параметра её вызвать. Ну, то есть, например: у вас было showShelfMachine = {() => showMachine(s)}, надо сделать showShelfMachine = {showMachine}, а вы сделали showShelfMachine = {showMachine(s)}.

[Nik Vik]

Перепроверка показала работоспособность предложения.
В чём была ошибка уже не смогу узнать. Ваше предложение подкрепляется советом из статьи Передача данных между компонентами в React
Спасибо. Совет работает.