Реагировать Antd, показывая несколько модальных на array.map

Question

При нажатии на кнопку обновления, модал появляется дважды, первый показывает правильный item.id, а второй - последнее значение в списке.любая помощь приветствуется.попытался добавить {this.props.child} внутри модального тега, но он не работает.

любая помощь будет оценена.

 this.state = {
  ModalText: 'Content of the modal',
  visible: false,
  currentId : 0,
  confirmLoading: false,
 }
}

showModal = () => {
 this.setState({
  visible: true,
 });
}



handleOk = () => {
    this.setState({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        confirmLoading: false,
      });
    }, 2000);
  }

  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false,
    });
  }

  render(){
    const { visible, confirmLoading, ModalText } = this.state;
    return(
      <div>
        <ul>
          {this.props.user.map(item => (
            <li key={item.id}>
              The person is {item.name} and the his/her email is 
 {item.email}.

            <Button type="primary" onClick={this.showModal}>
              Update
            </Button>
            <Modal title="Title"
              visible={visible}
              onOk={this.handleOk}
              confirmLoading={confirmLoading}
              onCancel={this.handleCancel}

            >
              {item.id}
              <UpdateModal/>

            </Modal>

            </li>
          ))}
        </ul>
        </div>
    )
  }
 }

Answer 1

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

1. This.showModal кнопки вызывается автоматически при рендеринге компонента, даже если вы не нажимаете, поэтому вам нужно ограничить это

2. Вы всегда показываете модальное без какой-либо условной проверки в цикле, поэтому вам нужна условная проверка для модального

So Change

     <Button type="primary" onClick={this.showModal}>
          Update
        </Button>
        <Modal title="Title"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}

        >
          {item.id}
          <UpdateModal/>

        </Modal>

До

     <Button type="primary" onClick={() => this.showModal()}> //made changes here
          Update
        </Button>
      //added change here —>  {visible && <Modal title="Title"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}

        >
          {item.id}
          <UpdateModal/>}

        </Modal>

Answer 2

Я думаю, что если вы посмотрите на DOM с помощью инструментов разработчика, вы обнаружите, что модальное окно появляется не дважды, а один раз для каждого элемента, и что последний элемент отображается только сверху.Все ваши модалы (вы визуализируете по одному для каждого элемента) управляются одним и тем же логическим значением visible в вашем состоянии, поэтому установите для него значение true, нажав любую из кнопок в списке, чтобы отобразить все модалы.

Есть несколько разных способов исправить это.Один из вариантов - использовать один модальный режим за пределами li s и установить идентификатор элемента в состояние при нажатии определенной кнопки и использовать это состояние в модальном режиме.