如何在react中使用axios删除单个项目

我查看了很多文章和帖子，例如this https://stackoverflow.com/questions/26806084/delete-a-comment-react-js但它在我的情况下不起作用。我只需要使用 axios 从我的应用程序的帖子列表中删除一个项目。在 axios 文档中，它说您需要将参数传递给删除方法。另外，我在大多数应用程序中都使用了 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>
        );
    }
}

我还在控制台中看到此错误： 未捕获（承诺中）类型错误：无法将未定义或 null 转换为对象 at Function.values 位于 get 方法中。 再次感谢。

您没有具体说明您的内容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);
    });

这是一个代码沙箱 https://codesandbox.io/s/vyyrxrnvql（在构造函数中使用一些虚拟数据）显示在 a 中传递的项目console.log()（axios 语句被注释掉）。

编辑：如何使用 Firebase REST API 发出 axios 删除请求

哦，抱歉，我没有看到您正在使用 Firebase。直接 REST 请求与 Firebase 略有不同。在您的配置中，请求应如下所示：

axios.delete(`${url}/${firebasePostId}.json`).then(response => {
    console.log(response)
})

这是假设您的 Firebase 规则允许未经授权的请求（我强烈建议不要这样做，因为任何人都可以发送此请求）。

请注意firebasePostId是您发送时 Firebase 提供的推送键POST向他们提出要求，实际上是一个很好的选择id对于你的帖子。一个例子是-LOLok8zH3B8RonrWdZs你在评论中提到的。

有关 Firebase REST API 语法的更多信息，请查看他们的文档 https://firebase.google.com/docs/reference/rest/database/.