Как добавить массив объектов во вложенное свойство с вложенным ключом карты? - PullRequest
Новая
       14

Как добавить массив объектов во вложенное свойство с вложенным ключом карты?

0 голосов
/ 17 апреля 2019

Я пытаюсь вставить объект во вложенное свойство с помощью метода-обработчика onClick, используя ключ сопоставленного объекта состояния, и отобразить новую строку таблицы с пустыми полями свойства.Я не хочу менять вложенные поля свойств, я просто хочу добавить новый объект к вложенному свойству.

Исходное состояние: 

this.state = {
 sites: [{
  id: 0,
  name: '',
  date: new Date(),
  status: '',
  statusDetails: ticket
 ]}
}

Это тот объект, который яя пытаюсь добавить: 

const ticket = [
  { ticketNumber: '', duration: '', rootCause: 'rootCause', impact: '', outageDetails: '' }
]

Моя таблица, которая обрабатывается: 

          <Table>

            ...

            <Table.Body>
              {this.state.sites.map((site, id) =>
                <Table.Row key={id}>
                  <Table.Cell><Checkbox slider /></Table.Cell>
                  <Table.Cell>{site.name}</Table.Cell>
                  <Table.Cell>
                    <Dropdown fluid button compact selection
                      placeholder='Status'
                      defaultValue={'ok'}
                      options={statusOptions}
                      onChange={this.handleStatusChange.bind(this, id)}
                    />
                  </Table.Cell>
                  <Table.Cell />
                  <Table.Cell />

                  <Table.Cell>
                    <Table>
                      <Table.Body>
                        {site.statusDetails.map(item =>
                          <Table.Row key={item}>
                            <Table.Cell>
                              <Input placeholder='Ticket #' onChange={this.handleCherwellChange.bind(this, id)/>
                            </Table.Cell>
                            <Table.Cell />
                            <Table.Cell>
                              <Form.Dropdown fluid button compact selection
                                placeholder='rootCause'
                                defaultValue={'rootCause'}
                                options={rootCauseOptions}
                                onChange={this.handleRootCauseChange.bind(this, id)}
                              />
                            </Table.Cell>
                            <Table.Cell><Input placeholder='Impact' onChange={this.handleImpactChange.bind(this, id)} /></Table.Cell>
                            <Table.Cell><Input placeholder='Outage Details' onChange={this.handleOutageDetailsChange.bind(this, id)} fluid size='mini' /></Table.Cell>
                          </Table.Row>
                        )}
                      </Table.Body>
                    </Table>
                  </Table.Cell>

                  <Table.Cell collapsing><Button icon='plus' onClick={this.addStatusDetail(id)} /></Table.Cell>
                </Table.Row>
              )}
            </Table.Body>

            ...

          </Table>

Я не собираюсь помещать все свои методы обработчика значения свойства, но вот два из них этоза работой.Первый метод-обработчик, который находится в первом отображении: 

handleStatusChange = (id, e, { value }) => {
    this.setState(Object.assign(this.state.sites[id], { status: value }));
  }

И мой второй обработчик во вложенном отображении: 

  handleImpactChange = (id, e, { impact }) => {
    const newSites = this.state.sites.map(site => {
      if (site.id !== id) return site;
      return { ...site, statusDetails: [...site.statusDetails, { impact }] };
    });
    this.setState({ sites: newSites });
  }

Теперь проблема заключается в моем методе onClick, который пытаетсявставить новый тикет в статус сайта подробно.Я попробовал три разных метода onClick: 

  addStatusDetails = (id) => {
    this.setState({ sites: [...this.state.sites[id].statusDetails.concat(ticket)] });
  }

  addStatusDetails = (id) => {
    this.setState((prevState) => {
      const { sites } = prevState;
      sites[id].statusDetails.push(
        Object.assign({}, { ...sites[id].statusDetails, ticket })
      );
      return { sites };
    })
  }

  addStatusDetails = (id) => {
    const { sites } = this.state;
    const newStatusDetails = sites[id].statusDetails;
    newStatusDetails.push(ticket);
    this.setState(Object.assign(sites[id], { statusDetails: newStatusDetails }))
  }

Использование каждого из них вызывает у меня очень разные проблемы, поэтому мне сложно указывать пин-код

Первый метод onClick дает мне эту проблему:

TypeError: Невозможно прочитать свойство 'map' из неопределенного

И второй, и третий методы onClick дают мне:

Инвариантное нарушение: превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

...