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

Posted 2023-02-22

【中文标题】错误：this.state.data[index].number 打印索引未定义

【英文标题】：Error : this.state.data[index].number prints index is not defined

【发布时间】：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，它也没有在类中全局定义，这就是原因。

【参考方案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)