React+Bootstrap5 实现Axios PUT更新时用Modal替代prompt的传参问题

• 未存储当前点击更新按钮对应的商品对象，导致参数无法从列表传递到Modal组件
• 直接依赖Bootstrap原生的DOM属性触发弹窗，未和React状态做联动，无法同步将商品原有名称填入Modal输入框
• Modal的确认按钮未绑定实际的更新提交逻辑，仅通过data-bs-dismiss关闭弹窗，没有触发接口请求

1. 补充状态定义 #

新增两个状态用于存储编辑上下文、控制Modal显隐，在原有状态声明区域追加：

// 存储当前正在编辑的商品对象
const [currentEditItem, setCurrentEditItem] = useState(null)
// 控制Modal显示/隐藏
const [isModalOpen, setIsModalOpen] = useState(false)

2. 重写更新按钮的点击逻辑 #

替换原有handleUpdate中直接调用prompt、发送PUT请求的逻辑，改为点击更新按钮时收集编辑上下文、打开Modal：

const handleUpdateClick = (item) => {
  setCurrentEditItem(item)
  // 将商品原有名称自动填入Modal输入框
  setInputData(item.name)
  setIsModalOpen(true)
}

同时修改列表中更新按钮的绑定，移除原生Bootstrap弹窗触发属性：

<button 
  className="btn btn-sm btn-outline-dark" 
  onClick={() => handleUpdateClick(item)}
>
  Update
</button>

3. 新增Modal确认提交逻辑 #

单独封装更新提交方法，绑定到Modal的确认按钮上，拿到上下文参数发送更新请求：

const handleConfirmUpdate = () => {
  if (!currentEditItem) return
  axios.put(
    `https://603cd864f4333a0017b68722.mockapi.io/user/${localDataUser.id}/inventory/${currentEditItem.id}`,
    { name: inputData }
  )
    .then(() => {
      // 请求成功后重新拉取库存列表
      axios.get(`https://603cd864f4333a0017b68722.mockapi.io/user/${localDataUser.id}/inventory`)
        .then(res => setProduct(res.data))
      // 关闭弹窗、清空临时状态
      setIsModalOpen(false)
      setCurrentEditItem(null)
      setInputData("")
    })
    .catch(err => console.log(err))
}

4. 替换原有注释掉的Modal代码 #

移除依赖原生DOM触发的Modal写法，改用React状态控制显隐，绑定按钮事件：

<div 
  className={`modal fade ${isModalOpen ? 'show' : ''}`} 
  tabIndex="-1" 
  aria-labelledby="exampleModalLabel"
  style={isModalOpen ? {display: 'block'} : {display: 'none'}}
>
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">Update Form</h5>
        <button 
          type="button" 
          className="btn-close" 
          aria-label="Close"
          onClick={() => setIsModalOpen(false)}
        />
      </div>
      <div className="modal-body">
        <div className="mb-3">
          <label htmlFor="recipient-name" className="col-form-label">Product name :</label>
          <input 
            type="text" 
            className="form-control" 
            id="recipient-name" 
            value={inputData} 
            onChange={handleChangeData}
          />
        </div>
      </div>
      <div className="modal-footer">
        <button 
          type="button" 
          className="btn btn-secondary"
          onClick={() => setIsModalOpen(false)}
        >
          Close
        </button>
        <button 
          type="button" 
          className="btn btn-primary"
          onClick={handleConfirmUpdate}
        >
          update
        </button>
      </div>
    </div>
  </div>
</div>

• 不要混用Bootstrap的原生DOM弹窗触发和React状态管理，否则会出现弹窗和组件状态不同步的问题
• 必须将当前编辑的商品对象存入React状态，不能通过DOM属性传值，否则会丢失组件上下文

内容的提问来源于stack exchange，提问作者faayakhun ramadhan