Error : this.state.data[index].number prints index is not defined

Question

我需要使用带有 axios 的 DELETE 请求从列表中删除一本书。我使用 this.state.data[index].number 获取书的编号并将其传递给 URL 但控制台打印错误“未定义索引”。我该如何解决该错误？

否则，当我将索引替换为特定索引（如 1）时，我将书的编号添加到 URL，但我的变量 cible（也需要该编号来删除书）会打印空...

这是我的代码：

export default class ListBooks extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null, data: [], number: "" }
    }
    componentDidMount() {
        Axios.get(process.env.REACT_APP_API_PATH_BOOKS)
            .then(res => {
                this.setState({ data: res.data });
            })
            .catch(errorThrown => {
                this.setState({ error: errorThrown });
            })
    }

        /**
        * Use to delete a book by the id.
        */
        handleDelete = () => {
            const id = this.state.data[index].number           
            Axios.delete(process.env.REACT_APP_API_PATH_BOOKS + id)
                .then(res => {
                     console.log(res);
                    console.log(res.data);
                    let cible = document.getElementById("book-admin" + id);
                    console.log(cible);
                    cible.remove();
                })
                .catch(errorThrown => {
                    this.setState({ error: errorThrown });
                })
        }

        render() {
            const { data } = this.state;

            return (
                <div>

                    <Container>

                        {data.map((books, index) =>
                            <div key={books.number}>
                                <ListGroup>
                                    <ListGroup.Item disabled id={"book-admin" + data.number}>{books.number}. {books.name} {books.author}
                                    </ListGroup.Item>
                                </ListGroup>
                                <Button variant="outline-warning" size="sm" className="btn-admin-change" id={data.number} onClick={this.props.handleUpdate}>Modifier</Button>
                                <Button variant="outline-danger" size="sm" className="btn-admin-change"  onClick={this.handleDelete}>Supprimer</Button>

                            </div>
                        )}
                    </Container>
                </div>
            )
        }
    }

Answer 1

您没有传递索引。

试试这个：

onClick={() => this.handleDelete(index)}

和

handleDelete = (index) => {

发送删除请求后，如果您想从状态数组中删除该项目，您可以使用：

handleDelete = (index) => {
    const id = this.state.data[index].number
    Axios.delete(process.env.REACT_APP_API_PATH_BOOKS + id)
        .then(res => {
            console.log(res);
            console.log(res.data);
            // let cible = document.getElementById("book-admin" + id);
            // console.log(cible);
            // cible.remove();
            this.setState(prevState => ({ ...prevState, data: prevState.data.filter((book) => book.number !== id) }))
        })
        .catch(errorThrown => {
            this.setState({ error: errorThrown });
        })
}

Answer 2

将索引作为参数传递到 handleDelete 函数中：

 handleDelete = (index) => {
            const id = this.state.data[index].number           
            Axios.delete(process.env.REACT_APP_API_PATH_BOOKS + id)
                .then(res => {
                     console.log(res);
                    console.log(res.data);
                    let cible = document.getElementById("book-admin" + id);
                    console.log(cible);
                    cible.remove();
                })
                .catch(errorThrown => {
                    this.setState({ error: errorThrown });
                })
        }

将您的第二个 Button onClick 函数更改为： onClick={() => this.handleDelete(index)}

Answer 3

控制台是对的，索引没有定义在你需要的范围内

这样做

  <Button variant="outline-danger" size="sm" className="btn-admin-change"  onClick={() => this.handleDelete(index)}>Supprimer</Button>

并在函数中接收参数


handleDelete = (index) => {

Error : this.state.data[index].number prints index is not defined

Error : this.state.data[index].number prints index is not defined

javascript

reactjs

axios

state

http-delete