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

Question

我正在开发一个博客首页，我想通过简单的 setState 命令按删除按钮来删除特定的 post。我的 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 后，没有显示任何错误，页面显示我现在想要的方式。但问题是当我按下删除按钮时，它不起作用，这意味着没有 post 行被扣除。我不知道出了什么问题。请帮我解决这个问题。我最近才开始......所以我还有很多东西要学......如果你进一步解释它也会对我的理解有很大帮助。

提前致谢

Answer 1

为removePost添加参数索引props.postData.map((post, index) => {

然后将参数索引传递给它

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

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

Answer 2

问题出在 removePost 函数因为你传递的是整个 post 对象

<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 作为参数传递给函数

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

React.js: Why delete button is not working?

javascript

reactjs

reactjs-flux