Reactjs 当我在React中单击“完成”按钮时，如何删除帖子

我有一个记事本。此应用程序创建新便笺、更新便笺、删除便笺并完成便笺。每个注释都有一个完整按钮、编辑按钮和删除按钮

当我在一张便笺上单击“完成”按钮时，它将穿透便笺中的文本，禁用“编辑”按钮，并将“完成”按钮更改为“撤消完成”按钮

我在点击便笺的“完成”按钮时遇到问题。当我单击“完成”时，它会删除应用程序中的所有注释。我只想删除那张纸条

我的代码：
员额构成部分：

        import React , {Component} from 'react';
        import axios from 'axios';
        import Post from '../../components/Post/Post';


        class Posts extends Component {

            state = {
                posts: [],
                error: false,
                strikeThrough:false
            }

            fetchNotes = () =>{

                axios.get( 'http://localhost:3001/notes' )
                    .then( response => {
                        //console.log(response.data);
                        const posts = response.data;
                        this.setState({posts: posts});

                    } )
                    .catch(error => {

                        this.setState({error: true});
                    });
            }

            componentDidMount () {
                this.fetchNotes();
            }



            completeHandler =()=>{
            if(this.state.strikeThrough){
                this.setState({strikeThrough:false})
            }else{
                this.setState({strikeThrough:true})
            }
            }


            render(){

                let posts = <p>Something went wrong!</p>;
                if(this.state.posts.length === 0){
                    posts =<p>Oops no post to show...</p>
                }else if (!this.state.error) {
                    posts = this.state.posts.map(post => {
                        //console.log(post._id);
                        return <Post key={post._id} 
                            title={post.title} 
                            text={post.text}
                            id={post._id}
                            fetchNotes={this.fetchNotes}
                            edit={() => this.props.history.push(`${'/update-note/'}${post._id}`)}
                            **complete = {()=>this.completeHandler(post._id)}**
                            striked={this.state.strikeThrough}

                          />;
                    });
                }

                return(
                    <div>
                        {posts}
                    </div>
                )
            }
        }

        export default Posts;


**Post Component:**

import React from 'react';
import classes from './Post.css';
import axios from 'axios';




const post = (props) => {
    return(
        <article className={classes.Post}>
        <h3  style={{ textDecorationLine: props.striked ? 'line-through': null }}>{props.title}</h3>
        <p style={{ textDecorationLine: props.striked ? 'line-through': null }}>{props.text}</p>
        <button onClick={props.complete}>{props.striked ? 'Undo Complete' : 'Complete'}</button>
       <button onClick={props.edit} disabled={props.striked} >Edit</button>
        <button  
    onClick={()=>{
        axios.delete('http://localhost:3001/notes/' + props.id)
        .then(response=>{
            console.log(response.data);
            props.fetchNotes();
        }).catch(e=>{
            console.log(e);
        })
    }}

        >Delete</button>
    </article>
    );
}

export default post;

import React，{Component}来自'React'；
从“axios”导入axios；
从“../../components/Post/Post”导入Post；
类Posts扩展组件{
状态={
员额：[]，
错误：false，
删除线：假
}
fetchNotes=（）=>{
axios.get（）http://localhost:3001/notes' )
。然后（响应=>{
//console.log（response.data）；
const posts=response.data；
this.setState（{posts:posts}）；
} )
.catch（错误=>{
this.setState（{error:true}）；
});
}
组件安装（）{
this.fetchNotes（）；
}
completeHandler=（）=>{
if（此.状态.删除线）{
this.setState（{strikeThrough:false}）
}否则{
this.setState（{strikeThrough:true}）
}
}
render（）{
让posts=出问题了！
；
if（this.state.posts.length==0）{
posts=Oops没有要显示的post

}else if（！this.state.error）{
posts=this.state.posts.map（post=>{
//控制台日志（post.\U id）；
返回这个.props.history.push（`${'/updatenote/'}${post.\u id}`）}
**complete={（）=>this.completeHandler（post.\u id）}**
删除={this.state.strikeThrough}
/>;
});
}
返回(
{posts}
)
}
}
导出默认职位；
**员额构成部分：**
从“React”导入React；
从“/Post.css”导入类；
从“axios”导入axios；
const post=（道具）=>{
返回(
{props.title}
{props.text}
{props.striked？'Undo Complete'：'Complete'}
编辑
{
axios.delete（'http://localhost:3001/notes/“+props.id）
。然后（响应=>{
console.log（response.data）；
props.fetchNotes（）；
}).catch（e=>{
控制台日志（e）；
})
}}
>删除
);
}
导出默认帖子；

---

我应该在completeHandler函数中写些什么，这样就只有我来做注释了。（在当前completeHandler中，我将状态设置为删除线：基于我在Post组件中添加的样式为true）。有人能帮我澄清一下我的问题吗。我只想删除那个注释，不是所有的注释都要删除，你的

帖子
组件需要有
删除行
的
数组
，这样每个
帖子
都有相应的
删除行
。以下代码实现：

        import React , {Component} from 'react';
        import axios from 'axios';
        import Post from '../../components/Post/Post';


        class Posts extends Component {

            state = {
                posts: [],
                error: false,
                strikeThrough: [],  //will contain strikeThrough state of each Post
            }

            fetchNotes = () =>{

                axios.get( 'http://localhost:3001/notes' )
                    .then( response => {
                        //console.log(response.data);
                        const posts = response.data;
                        this.setState({posts: posts});
                        this.setState({ strikeThrough: Array(posts.length).fill(false) }) //initialize strikeThrough Array
                    } )
                    .catch(error => {

                        this.setState({error: true});
                    });
            }

            componentDidMount () {
                this.fetchNotes();
            }



            completeHandler = (index) => {
            strikeArrClone = this.state.strikeThrough.slice(); //create clone of strikeThrough Array
            strikeArrClone[index] = !strikeArrClone[index];
            this.setState({ strikeThrough: strikeArrClone })
            }


            render(){

                let posts = <p>Something went wrong!</p>;
                if(this.state.posts.length === 0){
                    posts =<p>Oops no post to show...</p>
                }else if (!this.state.error) {
                    posts = this.state.posts.map((post, index)=> {
                        //console.log(post._id);
                        return <Post key={post._id} 
                            title={post.title} 
                            text={post.text}
                            id={post._id}
                            fetchNotes={this.fetchNotes}
                            edit={() => this.props.history.push(`${'/update-note/'}${post._id}`)}
                            complete = {()=>this.completeHandler(index)}
                            striked={this.state.strikeThrough[index]}

                          />;
                    });
                }

                return(
                    <div>
                        {posts}
                    </div>
                )
            }
        }

        export default Posts;

import React，{Component}来自'React'；
从“axios”导入axios；
从“../../components/Post/Post”导入Post；
类Posts扩展组件{
状态={
员额：[]，
错误：false，
删除线：[]，//将包含每个帖子的删除线状态
}
fetchNotes=（）=>{
axios.get（）http://localhost:3001/notes' )
。然后（响应=>{
//console.log（response.data）；
const posts=response.data；
this.setState（{posts:posts}）；
this.setState（{删除线：数组（posts.length）.fill（false）}）//初始化删除线数组
} )
.catch（错误=>{
this.setState（{error:true}）；
});
}
组件安装（）{
this.fetchNotes（）；
}
completeHandler=（索引）=>{
删除线克隆=this.state.strikeThrough.slice（）；//创建删除线阵列的克隆
删除链接克隆[索引]=！删除链接克隆[索引]；
this.setState（{strickethrough:strickerClone}）
}
render（）{
让posts=出问题了！
；
if（this.state.posts.length==0）{
posts=Oops没有要显示的post

}else if（！this.state.error）{
posts=this.state.posts.map（（post，index）=>{
//控制台日志（post.\U id）；
返回这个.props.history.push（`${'/updatenote/'}${post.\u id}`）}
complete={（）=>this.completeHandler（索引）}
删除={this.state.strikeThrough[index]}
/>;
});
}
返回(
{posts}
)
}
}
导出默认职位；
您的
帖子
组件需要有
删除线
的
数组
，这样每个
帖子
都有相应的
删除线
。低于鳕鱼