Реагируйте. js: Почему кнопка удаления не работает?

Question

Я работаю над главной страницей блога, где я хотел бы удалить конкретный пост, нажав кнопку удаления с помощью простой команды setState. Мой блог. 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;

код приложения. 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

Проблема связана с функцией 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 в функцию в качестве параметра

Answer 2

добавить индекс параметра в removePost props.postData.map((post, index) => {

, затем передать ему индекс аргумента

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

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