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

Posted 2023-02-22

【中文标题】React.js：为啥删除按钮不起作用？

【英文标题】：React.js: Why delete button is not working?React.js：为什么删除按钮不起作用？

【发布时间】：2020-06-29 13:32:11

【问题描述】：

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

提前感谢

【问题讨论】：

请在codesandbox上为此创建一个演示

【参考方案1】：

将参数索引添加到removePostprops.postData.map((post, index) =>

然后将参数索引传递给它

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

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

【讨论】：

对不起，这里有点新……还在想办法……再次感谢和抱歉

【参考方案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>
    );
  );

将索引作为参数传递给函数

【讨论】：

也许你误接受了错误的。如果我的代码解决了您的问题，请接受我的代码。