如何在我的模型中輸入正確的ID？

我有一個 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>
        ) : ""

提前致謝 ！

uj5u.com熱心網友回復：

每一個你的模態都在看同一個 openPut 變數，它是一個布林值，所以它們要么都是 open，要么都是 closed。碰巧最后一個是唯一可見的。最快的解決方法是：

<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>

標籤：反应 接口 休息 公理 放

上一篇：影像不呈現反應

下一篇：如何在javascript中更新陣列的特定物件值