如何将正确的 ID 放入我的模型中？

Question

我有一个API，我想为每本书放置一个模板，以便在同一页面上进行编辑。

不幸的是，它总是显示列表中的最后一个数据，而不是我想要的数据。我真正想要的是当我按下“id 2”的 PUT 按钮时，我希望我的模型向我显示“id 2”的数据，而不是数据库中的最后一个 id（例如，“id 10”）。

这是我的构造函数和来自 api 的调用：

constructor(props) {
        super(props)

        this.state = {
            data: [],
            openPost: false,
            openPut: false
        }
    }

    componentDidMount() {
        axios.get('https://127.0.0.1:8000/api/books')
            .then(response => {
                this.setState({
                    data: response.data
                })
            })
    }

这是我的代码：

{
    data.map(book => 
    <div key={book.id}>
            <div className="card ml-auto mr-auto mb-3">
                <div className="card-body" key={book.id}>
                    <h2 className="card-title">{book.title}</h2>
                    <h6 className="card-subtitle mb-2 text-muted">{book.subtitle}</h6>
                    <p className="card-text">{book.content}</p>
                    <Model id={"Model_put-" + book.id} value={book.id} trigger={this.state.openPut} setTrigger={!this.state.openPut} id_book={book.id}>
                        <button onClick={() => this.setState({ openPut: false })} className="close-btn btn-danger">X</button>
                        <h3>My Model</h3>
                        <p>This is my button triggered Model</p>
                        <input type="text" name="id" className='form-control' value={book.id} ></input>
                        <div className="row">
                            <div className="col">
                                <input type="text" name="title" className='form-control' placeholder='Title' ></input>
                            </div>
                            <div className="col">
                                <input type="text" name="content" className='form-control' placeholder="Content" ></input>
                            </div>
                        </div>
                        <div className="col">
                            <textarea className='form-control mt-2' defaultValue={book.content} />
                        </div>
                    </Model>
                    <button onClick={() => this.setState({ openPut: true })} type="button" className="btn btn-warning" id={"book-" + book.id} href="#">
                        PUT
                    </button>
                </div>
            </div>
    </div>)
}

以及我的 Modal.js 文件的内容：

return (this.props.trigger) ? (
            <div className="modal">
                <div className="modal-inner">
                    { this.props.children }
                </div>
            </div>
        ) : ""

提前致谢！

Answer 1

你的每一个模态框都在查看同一个 openPut 变量，它是一个布尔值，所以它们要么全部打开，要么全部关闭。恰好最后一个是唯一可见的。最快的解决方法是：

<Model
    id={"Model_put-" + book.id}
    value={book.id}
    trigger={this.state.openPut === book.id}
    setTrigger={!this.state.openPut} id_book={book.id}
>
    /* ... */
</Model>
<button
    onClick={() => this.setState({ openPut: book.id })}
    type="button"
    className="btn btn-warning"
    id={"book-" + book.id}
    href="#"
>
    PUT
</button>

如何将正确的 ID 放入我的模型中？

How can I put the correct ID in my model?

reactjs

api

rest

axios

put