Получить ранее сохраненное значение из состояния после повторного рендеринга компонента

Question

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

когда пользователь нажимает кнопку редактирования в соответствии с информацией о модуле, показанной в таблице, уникальный идентификатор модуля передается в editModuleForm () для изменения модуля в базе данных.

Проблема в том, что я получаю неопределенное значение, которое ID модуля передал, когда компонент редактирования по какой-то причине рендерится. Компонент должен отображаться только тогда, когда пользователь нажимает на кнопку редактирования, и удаляется только при включенной перекрестной кнопке.

Это состояние, которым я управляю, панель редактирования переключает ч / б значение true или false в состояние.

this.state = {
  editModuleDisplay: false,
}

в коде кнопки редактирования для переключения состояния и передачи идентификатора модуля

<i className="fa fa-pencil text-warning padding-left-lg iconStyles"
    onClick={ async () => {
        await this.editModuleForm(props.original.m_id)
        await this.setState({
            editModuleDisplay: true
        })
    }}
/>

в editModuleForm ()

editModuleForm = (id) => {
    console.log(id)  //logging the module id
return ( some JSX form )
}

в рендере ()

 {this.state.editModuleDisplay && this.editModuleForm()}

Я хочу, чтобы идентификатор модуля был в форме редактирования, поэтому, когда пользователь изменяет модуль, я могу изменить модуль по этому уникальному идентификатору модуля в базе данных.

Краткое примечание: я не знаком с Redux, поэтому, если Redux чем-то полезен, пожалуйста, кратко.

Answer 1

Вы можете сохранить идентификатор формы в состоянии реакции и передать его соответствующим образом:

editModuleForm = (id) => {
  this.setState({
   editingFormId:id
  })
    console.log(id)  //logging the module id
  return ( some JSX form )
}

Answer 2

Из кода, который вы показали, вы пытаетесь сделать асинхронный вызов функции, а не обещание. editform не является Обещанием, поэтому вы не можете его ждать. Если вы пытаетесь поделиться состоянием, вам нужно либо передать его из родительского компонента, либо использовать Context api, либо Redux в зависимости от того, что вы пытаетесь сделать.