reactjs - 反应表中的反应模式不返回每一行的唯一内容

Question

我正在使用 react-modal 和 react-bootstrap-table2 在模式中显示行的值。

现在，无论单击的行如何，模态都会显示最后一行的值。如何确保每个模式显示自己的行数据？

renderButtons = (cell, row, rowIndex) => {
return (
  <span>
    <button onClick={this.openModal}>Details</button>
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <div>
        <h2 ref={subtitle => (this.subtitle = subtitle)}>{cell} title</h2>
        <button onClick={this.closeModal}>close</button>
        {cell}- {row.name}
        {row.record_type}: {row.specific_type}: {row.health_name}
      </div>
    </Modal>
  </span>
);
};

表中使用了 renderButtons：

renderRecordsTable() {
    const records = this.props.records;
    const isPerson = this.props.recordable_type == 'user';

    const columns = [
      {
        dataField: 'id',
        formatter: this.renderButtons,
        text: '',
        headerTitle: false
      }

    ];
    return (
      <BootstrapTable
        keyField="id"
        data={records}
        columns={columns}
        filter={filterFactory()}
      />
    );
  }

并在我的组件中渲染

render() {
  return (
    <div name="records" className="content">
        {this.renderRecordsTable()}
    </div>
  );
}