如何在React中使用axios删除单个项目
我已经研究了许多类似这样的文章和帖子，但在我的情况下不起作用，我只需要使用axios从我的应用程序中的帖子列表中删除一个项目即可。在axios文档中，它说您需要将参数传递给delete方法。另外，在大多数应用中，我都使用过ID，而ID却没有处于状态。但是我不能让它工作。请查看我的整个代码。我知道我的删除方法是错误的，请帮助我修复它：
// The individual post component const Post = props => (
<article className="post">
<h2 className="post-title">{props.title}</h2>
<hr />
<p className="post-content">{props.content}</p>
<button onClick={props.delete}>Delete this post</button>
</article>
);
// The seperate form component to be written later
class Form extends React.Component {}
// The posts loop component
class Posts extends React.Component {
state = {
posts: [],
post: {
title: "",
content: ""
}
// error:false
};
componentDidMount() {
const { posts } = this.state;
axios
.get("url")
.then(response => {
const data = Object.values(response.data);
this.setState({ posts : data });
});
}
handleChange = event => {
const [name , value] = [event.target.name, event.target.value];
// const value = event.target.value;
const { post } = this.state;
const newPost = {
...post,
[name]: value
};
this.setState({ post: newPost });
};
handleSubmit = event => {
event.preventDefault();
const {post} = this.state;
const {posts} = this.state;
axios
.post("url", post)
.then(response => {
// console.log(response);
const newPost = Object.values(response.data);
this.setState({ post: newPost });
const updatedPosts = [...posts, {title:post.title,content:post.content}];
this.setState({ posts: updatedPosts});
// console.log(post);
console.log(updatedPosts);
console.log(this.state.posts);
});
};
handleDelete = () => {
const { post } = this.state;
axios.delete("url",{params: {id: post.id}})
.then(response => {
console.log(response);
});
};
render() {
let posts = <p>No posts yet</p>;
if (this.state.posts !== null) {
posts = this.state.posts.map(post => {
return <Post
key={post.id}
{...post}
delete={this.handleDelete}/>;
});
}
return (
<React.Fragment>
{posts}
<form className="new-post-form" onSubmit={this.handleSubmit}>
<label>
Post title
<input
className="title-input"
type="text"
name="title"
onChange={this.handleChange}
/>
</label>
<label>
Post content
<input
className="content-input"
type="text"
name="content"
onChange={this.handleChange}
/>
</label>
<input className="submit-button" type="submit" value="submit" />
</form>
</React.Fragment>
);
}
}
我还在控制台中看到此错误：未捕获（承诺）TypeError：无法将未定义或null转换为get方法中Function.values的对象。再次感谢。
回答：
您没有指定Post组件应删除的内容。换句话说，props.delete不会接收id到传递给您的父组件。为此，您可以将其更改为() =>
props.delete(props.id)，然后在父组件中需要让该handleDelete方法接收id要定位的项目的，这是id我们早先从传递过来的Post。
我不知道服务器的设置方式，但是使用最初在问题中遇到的axios请求，您的代码如下所示：
handleDelete = (itemId) => { // Whatever you want to do with that item
axios.delete("url", { params: { id: itemId } }).then(response => {
console.log(response);
});
这是一个CodeSandbox（在构造函数中使用一些伪数据），显示正在传递的项目console.log()（axios语句已被注释掉）。
抱歉，我没有看到您使用的是Firebase。直接REST请求与Firebase有所不同。在您的配置中，请求应如下所示：
axios.delete(`${url}/${firebasePostId}.json`).then(response => { console.log(response)
})
这是假设您的Firebase规则允许未经授权的请求（强烈建议您反对，因为有人可以发送此请求）。
请注意，这firebasePostId是Firebase向您发送POST请求时提供的按键，实际上是id您发帖的不错选择。-LOLok8zH3B8RonrWdZs您在注释中提到的一个例子。
有关Firebase REST
API语法的更多信息，请查看其文档。
以上是 如何在React中使用axios删除单个项目 的全部内容， 来源链接： utcz.com/qa/398756.html
