错误：this.state.data[index].number 打印索引未定义答案

【问题标题】：Error : this.state.data[index].number prints index is not defined错误：this.state.data[index].number 打印索引未定义
【发布时间】：2020-10-19 19:37:57
【问题描述】：

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

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

这是我的代码：

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

【问题讨论】：

handleDelete 没有传递给它的变量或参数称为index，它也没有在类中全局定义，这就是原因。

标签： javascript reactjs axios state http-delete

【解决方案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 });
        })
}

【讨论】：

【解决方案2】：

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

这样做

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

并在函数中接收参数


handleDelete = (index) => {

【讨论】：

【解决方案3】：

将索引作为参数传递给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)}

【讨论】：