为什么React Hooks组件中prop在模态框仅显示第一次迭代的值？

问题原因 #

所有ProductCard组件内的模态框都使用了相同的固定id productModal，触发按钮的data-target也统一指向#productModal。HTML规范要求id全局唯一，重复id场景下浏览器只会匹配页面中第一个出现的对应id元素，因此无论点击哪个卡片的按钮，打开的都是第一个卡片对应的模态框，自然只会展示第一次迭代项的信息。

解决方案1 （快速修复现有逻辑） #

给每个模态框和对应触发按钮绑定唯一id，直接复用商品的唯一标识_id即可，修改ProductCard内的两处代码：

1. 按钮的data-target属性修改为动态值：

<Button
  data-toggle="modal"
  data-target={`#productModal-${product._id}`}
  className="cart-button"
  style={buttonStyle}
>
  quick shop
</Button>

2. 模态框的id属性修改为对应动态值：

<div
  className="modal left fade"
  id={`productModal-${product._id}`}
  tabIndex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>

解决方案2 （更符合React生态的推荐写法） #

改用React-Bootstrap官方提供的Modal组件，通过组件内部state控制模态框显隐，完全避免全局id冲突问题：

1. 首先在ProductCard内新增控制模态框显隐的state：

const [showModal, setShowModal] = useState(false);

2. 修改触发按钮，点击时修改state，移除原有的data-*属性：

<Button
  className="cart-button"
  style={buttonStyle}
  onClick={() => setShowModal(true)}
>
  quick shop
</Button>

3. 把原有的原生模态框代码替换为React-Bootstrap的Modal组件，绑定显隐状态和关闭逻辑：

import { Modal } from 'react-bootstrap';

// 替换原模态框部分代码
<Modal show={showModal} onHide={() => setShowModal(false)} className="left fade product-modal">
  <Modal.Dialog className="product-modal-dialog">
    <Modal.Content className="product-modal-content">
      {/* 原有的模态框头部、身体内容直接复用即可 */}
      <div className="modal-header quickshop-modal-header">
        <p className="quickshop-title">Quick View</p>
        <button
          type="button"
          className="close quickshop-close"
          aria-label="Close"
          onClick={() => setShowModal(false)}
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="modal-body product-modal-body">
        {/* 原模态框内的所有内容直接复制到这里即可 */}
      </div>
    </Modal.Content>
  </Modal.Dialog>
</Modal>

额外优化提示 #

你当前代码中声明了title、rating两个state，但没有做赋值逻辑，卡片上的{title}和{rating}目前会是空值，建议直接使用product.title和对应评分字段渲染，避免多余的state同步成本。

内容的提问来源于stack exchange，提问作者Tim Taylor