React Modal 总是使用一行中的相同记录

Question

所以我有一个表格，显示来自 API 调用的多个作业。每个表格行都有一个按钮，用于打开引导模式，显示有关所述作业的更多信息。

我的问题是模式似乎没有为单击的行打开。它总是打开一个特定的行（具有最低 id 的行）。有人知道我在做什么错吗？ ModalComponent

render() {
  console.log("job: ", this.props.id)
  return (
    <div className="container">
      <ReactBootstrap.Modal
        {...this.props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <ReactBootstrap.Modal.Header closeButton>
          <ReactBootstrap.Modal.Title id="contained-modal-title-vcenter">
            {this.props.title}
            {this.props.employer}
          </ReactBootstrap.Modal.Title>
        </ReactBootstrap.Modal.Header>
        <ReactBootstrap.Modal.Body>
          <h4>Would you like to apply to this job?</h4>
          <p>{this.props.description}</p>
        </ReactBootstrap.Modal.Body>
        <ReactBootstrap.Modal.Footer>
          <button className="btn btn-primary" onClick={this.applyJob}>Apply</button>
          <button className="btn btn-warning" onClick={this.props.onHide}>Close</button>
        </ReactBootstrap.Modal.Footer>
      </ReactBootstrap.Modal>
    </div>
  )
}

console.log 吐出表格中每一行的 id。

我的TableComponent 将每个作业的作业详细信息传递到ModalComponent，如下所示： TableComponent

<tbody>
  {
    this.props.response.map(    //  map allows you to loop around items
      job =>  //  a key is used to identify a row
        <tr key={job.id}>
          <td>{job.employer}</td>
          <td>{job.jobTitle}</td>
          <td>{job.county}</td>
          {/* <td>{job.applied + ''}</td> */}
          <td>
            {this.checkApplied(job.applied)}
          </td>
          <td><button className="btn btn-info" onClick={() => this.setState({ addModalShow: true })}>Info</button></td>
          <ApplyComponent
            show={this.state.addModalShow}
            onHide={addModalClose}
            id={job.id}
            title={job.jobTitle}
            employer={job.employer}
            county={job.county}
            description={job.description}
            status={job.applied}
          />
        </tr>
    )
  }
</tbody>

以下是表格和模态的图像：

如您所见，即使单击顶行，底行的详细信息也会显示在模态中。

Answer 1

问题

您正在映射多个项目，每个项目都有自己的模式。这些模式中的每一个都通过show 属性确定它是打开还是关闭。

对于每个映射的元素，show 属性设置为 this.state.addModalShow。

结果

每个模式都将同时打开和关闭，因为它们基于相同的状态值。单击任何项​​目将导致所有项目打开或关闭。

可见的结果是您将始终将最后一个模态视为打开的模态，因为它是最后一个渲染并且将在顶部。

解决方案

这是一种需要最少更改的解决方案：

对每个项目使用不同的状态值。

this.props.response.map(
  job =>
    <tr key={job.id}>
      <td>{job.employer}</td>
      <td>{job.jobTitle}</td>
      <td>{job.county}</td>
      <td>
        {this.checkApplied(job.applied)}
      </td>
      <td>
      <button 
        className="btn btn-info" 
        onClick={() => {
          // Use a computed property name to make it unique based on the ID
          this.setState({ ['show_'+job.id]: true })
        }
      >Info</button></td>
      <ApplyComponent
        show={this.state['show_'+job.id]} // Use the same state value as the prop
        onHide={() => {
          // Follow the same process for closing
          this.setState({ ['show_'+job.id]: false})
        }}
        id={job.id}
        title={job.jobTitle}
        employer={job.employer}
        county={job.county}
        description={job.description}
        status={job.applied}
      />
    </tr>
)

Answer 2

简单的解决方案是使用 selectedRow 或 selectedJob 或 selectedCompany
当使用点击每行中存在的特定按钮时

它将动态显示所选行模型对话框的信息

    function handleClickCompanyCard(company: Company) {
            setSelectedCompany(company);
            setShowState(true);
          }
return (
     <Fragment>
    {companiesData.map((company: Company, id) => (
<div
  onClick={() => handleClickCompanyCard(company)}
>
  row for one company
</div>
    )}
    </Fragment>


    <Fragment>
      <Modal show={showState} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{selectedCompany?.company_name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, youre reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </Fragment>
);