如何在React项目中向Modal传入正确ID以加载对应选中的书籍数据

问题根源 #

你当前所有图书的Modal都共用了同一个openPut状态控制显示，只要openPut为true，所有列表项的Modal都会被同时渲染，层级靠后的最后一条数据的Modal会覆盖在其他Modal上方，所以你始终只能看到最后一条数据。

解决步骤 #

1. 新增状态字段存储当前编辑的图书ID

修改构造函数中的state定义，新增currentEditBookId字段：

constructor(props) {
    super(props)
    this.state = {
        data: [],
        openPost: false,
        openPut: false,
        currentEditBookId: null // 存储当前要编辑的图书ID
    }
}

2. 修改PUT按钮点击逻辑

点击按钮时不仅打开Modal，同时记录当前选中的图书ID：

<button 
    onClick={() => this.setState({ openPut: true, currentEditBookId: book.id })} 
    type="button" 
    className="btn btn-warning" 
    id={"book-" + book.id}
>
    PUT
</button>

3. 调整Modal的显示条件

只有当前Modal对应的图书ID等于正在编辑的ID时，才触发显示：

<Model 
    id={"Model_put-" + book.id} 
    value={book.id} 
    trigger={this.state.openPut && this.state.currentEditBookId === book.id} 
    id_book={book.id}
>

4. 修改关闭按钮逻辑，清空编辑ID

关闭Modal时重置编辑ID，避免下次打开出现异常：

<button 
    onClick={() => this.setState({ openPut: false, currentEditBookId: null })} 
    className="close-btn btn-danger"
>
    X
</button>

优化建议 #

• 你当前的表单输入项没有绑定状态，属于非受控组件，后续提交编辑数据时可以通过表单ID获取值，或者改为受控组件把输入内容同步到state中更方便操作。
• 注意你代码中组件名写的是Model，如果是模态框组件常规命名为Modal，避免拼写错误导致的组件引入问题。

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