React项目中Axios删除书籍时index未定义及DOM获取null的问题求助

咱们一步步拆解你遇到的问题，逐个解决：

1. 搞定index is not defined错误 #

你在handleDelete里直接用index，但这个变量只在map循环的局部作用域里存在，函数外部根本拿不到它。最直接的办法是把要删除的书籍编号作为参数传递给handleDelete：

• 先修改handleDelete，让它接收书籍编号参数：

handleDelete = (bookNumber) => {
  // 用模板字符串拼接URL更清晰
  Axios.delete(`${process.env.REACT_APP_API_PATH_BOOKS}${bookNumber}`)
    .then(res => {
      console.log(res);
      console.log(res.data);
      // 后续处理逻辑
    })
    .catch(errorThrown => {
      this.setState({ error: errorThrown });
    })
}

• 然后在渲染删除按钮时，把当前书籍的编号传进去：

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

这样就彻底摆脱了对index的依赖，直接用唯一的书籍编号操作，逻辑更清晰可靠。

2. 解决cible为null的问题 #

你给ListGroup.Item设置id时犯了个小错误：用了data.number，但data是整个书籍数组，应该用当前循环项的books.number：

<ListGroup.Item 
  disabled 
  id={`book-admin${books.number}`}
>
  {books.number}. {books.name} {books.author}
</ListGroup.Item>

另外，更符合React设计理念的做法是通过更新state来移除元素，而不是直接操作DOM（React是数据驱动视图的，手动改DOM容易导致视图和state不一致）：
在handleDelete的then回调里，过滤掉已删除的书籍，更新state：

.then(res => {
  console.log(res);
  console.log(res.data);
  // 更新state，自动触发视图重新渲染
  this.setState(prevState => ({
    data: prevState.data.filter(book => book.number !== bookNumber)
  }));
})

这样React会自动帮你移除对应的DOM元素，不需要再手动调用cible.remove()。

额外优化建议 #

你的修改按钮id也写错了，应该用books.number而非data.number，如果handleUpdate也需要书籍编号，记得同样传递参数：

<Button 
  variant="outline-warning" 
  size="sm" 
  className="btn-admin-change" 
  id={books.number} 
  onClick={() => this.props.handleUpdate(books.number)}
>
  Modifier
</Button>

把这些修改完成后，你的删除功能应该就能正常运行了！

内容的提问来源于stack exchange，提问作者Rom-888