React.js：为什么删除按钮不起作用？

Question

我正在博客的头版上工作，我想通过简单的setState命令按下删除按钮来删除特定帖子。我的Blog.js如下：

import React from "react";
const BlogBody = props => {
  return props.postData.map(post => {
    const { title, author, content } = post;
    return (
      <React.Fragment key={post}>
        <h2>{title}</h2>
        <h5>
          <i>{author}</i>
        </h5>
        <h3>{content}</h3>
        <br />
        <button onClick={()=>props.removePosts(post)}>Delete</button>
        <hr />
      </React.Fragment>
    );
  });
};

const Blog=(props)=>{
  const {postData,removePosts}=props;
  return(
    <div>
      <BlogBody postData={postData} removePosts={removePosts}/>
    </div>
  )
}

export default Blog;

下面给出了App.js代码：

import React,{Component} from 'react';
import Blog from './Blog'
import Createpost from './Createpost'


class App extends Component {
state={
     user:'ali',
        posts:[
            {
                title:'First',
                author:'Written by Ali',
                content:'first Post',
            },
            {
                title:'Second',
                author:'Written by Ali',
                content:'Second Post',
            },
            {
                title:'third',
                author:'Written by Ali',
                content:'third Post',
            },
        ]
};
removePosts=index=>{
    const{posts}=this.state

    this.setState({
        posts:posts.filter((post,i)=>{
            return i!==index
        }),
    })
}
    render(){
        const {posts}=this.state       
            return (  
                <div style={{padding:8}} className="container">
                    <Createpost/>
                    <hr/>
                    <Blog postData={posts} removePosts={this.removePosts}/>
                </div>
            );
        }

    }

export default App ;

和Createpost.js在下面给出：

import React, {Component} from 'react'
class Createpost extends Component {

    render() { 
        return ( 
            <form onSubmit={e=>e.preventDefault()}>
            <div>
                <label htmlFor="create-title">Title:</label>
                <input type="text" name="create-title" id="create-title"/>
            </div>
            <textarea/>
            <input type="submit" value="Create"/>
            </form>
         );
    }
}

export default Createpost;

没有错误显示，该页面显示了执行npm start后我现在想要的方式。但是问题是当我按下删除按钮时，它不起作用，这意味着不扣除任何发布行。我不知道出了什么问题。请帮助我。我是最近才开始的....所以我仍然有很多东西要学习...如果您进一步解释它，这对我也将有很大的帮助。

预先感谢

Answer 1

在App.js中对此有所了解

removePosts=index=>{
   const{posts}=this.state

   this.setState({
       posts:posts.filter((post,i)=>{
           return i!==index
       }),
   })
}

尝试一下。它应该可以工作。

removePosts = index => {
    const { posts } = this.state
    console.log(index)
    this.setState({
      posts: posts.filter((post, i) => {
        return post !== index
      })
    })
  }

Answer 2

查看此

将传递索引添加到removePost

https://codesandbox.io/s/festive-oskar-04ufb

Answer 3

问题出在removePost函数上因为您正在传递整个帖子对象

<button onClick={()=>props.removePosts(post)}>Delete</button>

但是在检查时，您正在检查索引

return i!==index

**尝试这个：**

   return props.postData.map((post, index) => {
    const { title, author, content } = post;
    return (
      <React.Fragment key={post}>
        <h2>{title}</h2>
        <h5>
          <i>{author}</i>
        </h5>
        <h3>{content}</h3>
        <br />
        <button onClick={()=>props.removePosts(index)}>Delete</button>
        <hr />
      </React.Fragment>
    );
  });

将index作为参数传递给函数