Error : this.state.data[index].number prints index is not defined
Error : this.state.data[index].number prints index is not defined
我需要使用带有 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>
)
}
}
您没有传递索引。
试试这个:
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 });
})
}
将索引作为参数传递到 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)}
控制台是对的,索引没有定义在你需要的范围内
这样做
<Button variant="outline-danger" size="sm" className="btn-admin-change" onClick={() => this.handleDelete(index)}>Supprimer</Button>
并在函数中接收参数
handleDelete = (index) => {
我需要使用带有 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>
)
}
}
您没有传递索引。
试试这个:
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 });
})
}
将索引作为参数传递到 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)}
控制台是对的,索引没有定义在你需要的范围内
这样做
<Button variant="outline-danger" size="sm" className="btn-admin-change" onClick={() => this.handleDelete(index)}>Supprimer</Button>
并在函数中接收参数
handleDelete = (index) => {