ReactJS возвращает сохраненный ответ и передает его другому компоненту

Question

Наш проект в РЕАКТЕ, а бэкэнд в Express.

Я не могу вернуть Inserted Id родительской таблицы моему компоненту и передать его другому компоненту, которому нужен Parent ID для отображения кнопки Add Child (которая передает родительский идентификатор в дочерней записи)

Каждая родительская запись имеет дополнительную кнопку «Добавить план этажа», которая добавляет запись в свою дочернюю таблицу. (проверьте изображение 1)

Итак, при рендеринге всех строк родительской таблицы я проверяю, существует ли «ID», затем показываю кнопку «Добавить» для этой строки. Я не могу показать кнопку «Добавить план этажа» во время рендеринга, поскольку ее родительской записи там не будет, и я не смогу передать «родительский идентификатор», который является внешним ключом в дочерней таблице.

Проверьте код ниже, чтобы отобразить кнопку Добавить планы этажей (запись дочерней таблицы):

class FloorPlanButton extends React.Component {
  render() {
    return (
      <div className="row">
        {this.props.dependentValues.id ? (
          <button
            onClick={() =>
              this.props.addFloorPlanButton(this.props.dependentValues.id)
            }
          >
            Add Floorplans
          </button>
        ) : (
          ""
        )}
      </div>
    );
  }
}

Я хочу отобразить кнопку «Добавить дочерний элемент», когда пользователь нажимает «Добавить строку (родительский элемент - проверьте в правом верхнем углу изображения 1)» и сохраните эту запись. Он сохраняет запись в родительской таблице, но не может показать кнопку «Добавить план этажа», поскольку кнопки рендеринга там не было. (проверьте изображение 2)

Проверьте код ниже, который сохраняет запись родительской таблицы:

let response = await AboutService.insertTableData(url, {data: data});

Оба кода находятся в разных компонентах и ​​файлах.

См. Ниже рабочий процесс, чтобы объяснить эту ситуацию с файлами / компонентами и потоком данных:

1. Существует файл home.js, который визуализирует компонент управления контентом и передает все данные для отображения (родительская таблица)
2. Компонент управления контентом:
   • а. Визуализирует все родительские строки кнопкой «Добавить строку» для добавления новой родительской строки
   • б. В каждой родительской строке есть кнопка «Добавить план этажа» (дочерняя таблица)
3. Нажатие кнопки Добавить строку передает все введенные данные (из родительской таблицы) в главный файл «home.js»
4. Файл Home.js имеет функцию «insertData» для связи с Express, которая сохраняет данные в соответствующей таблице и возвращает ответ.
5. Проблема: я не могу найти способ передать эти обновленные данные (старые записи + новая запись) в компонент управления контентом и показать кнопку «Добавить план этажа» для новой записи без повторного рендеринга.

Пожалуйста, помогите мне отобразить кнопку "Добавить план этажа", когда родительские записи сохранены без повторного рендеринга или обновления панели.

Answer 1

Пусть реагирует, сделай свою работу, хотя.Я предполагаю, что вы храните текущие строки в родительском состоянии.Поэтому, когда приходит ответ, просто добавьте запись в состояние (непременно, так что реакция может сделать вывод, что что-то изменилось).А затем в следующем рендере передайте новый реквизит ребенку.Реагируй с его примирением сделай за тебя грязную работу.Решите проблемы с производительностью, когда это необходимо.Читаемость в первую очередь.

Answer 2

После того, как данные вставлены, вы можете снова вызвать ваше обещание получения данных (надеюсь, оно находится в функции, поэтому его можно легко вызвать), что, возможно, обновляет ваше состояние последними записями.

В дочернем компоненте вы можете использовать метод жизненного цикла componentWillReceiveProps, который установит состояние дочернего компонента и применит соответствующие изменения.

Лучшая статья для игры с жизненным циклом React: - http://busypeoples.github.io/post/react-component-lifecycle/