Javascript 如何在reactjs中编辑和删除api数据表

我是新的反应，目前我正在做API获取和显示在表中，并在该表中添加编辑删除。我成功获取API，我可以添加一个新行连同API数据。但我不知道如何编辑和删除。我看到了一些问题，但我的代码结构不同，因此我无法找到答案。请提供帮助

这是我的密码

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { makeStyles,withStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import EditIcon from '@material-ui/icons/Edit';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';




const useStyles = theme => ({
  fab: {
    margin: theme.spacing(1),
  },
  extendedIcon: {
    marginRight: theme.spacing(1),
  },
});
const Post = ({ body }) => {


    return (
        <table className=" table-striped">
          <thead>
           <tr>
          <th>Id</th>
          <th>Title</th>
          <th>Content</th>
          
          </tr>
          </thead>
          <tbody>


      {body.map(post => {
        const { _id, title, content } = post;
        return (

            <tr key={_id}>
            <td> {_id!=''?_id: '-'}</td>
            
            <td> {title!='' ?title: '-'}</td>
            
            <td> {content!=''?content: '-'}</td>
            <hr />
            </tr>

        );
      })}

    </tbody>
    </table>
  );
};

class App extends React.Component {
  state = {
    isLoading: true,
    posts: [],
    error: null,
    open:false,
   newData:[
     {
      _id:'',
      title:'',
      content:''
     }
  ]
  };
  fetchPosts() {
    const axios = require('axios');
    axios
      .get("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json")
      .then(response => {        
          this.setState({
            posts: response.data.posts,
            isLoading: false,

          })

          //)
      } )

        }



  componentDidMount() {
    this.fetchPosts();
  }
  handleClickOpen = () =>
    this.setState({
      open:true
    })
;
  handleClose = () =>
    this.setState({
      open:false
    })
;
// handleClick = () =>
//    {
//      {this.handleClickOpen}
//      {this.addItem}
//    }
// ;
 addItem = () =>
 {
    var temp = [];
    var tempPosts = this.state.posts;  
    var newData = this.state.newData[0];
    console.log(this.state.newData)
    if(this.state.newData[0]._id && this.state.newData[0].title && this.state.newData[0].content){
      tempPosts.push(newData);
      console.log(tempPosts)
      this.setState({posts: tempPosts})

    }

  }   

  render() {
    const { isLoading, posts } = this.state;


    return (
      <React.Fragment>
        <h1>React Fetch - Blog</h1>
        <div>
      <Button variant="outlined" color="primary" onClick=
    {this.handleClickOpen}

>
        Add
      </Button>
      <Dialog open={this.state.open} onClose={this.handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>

          <TextField
            autoFocus
            margin="dense"
            id="_id"
            label="id"
            value={this.state.newData._id}
            onChange={(e)=>  {
              let{ newData } = this.state;              
              newData[0]._id=e.target.value;
              this.setState({newData})
            }}
            type="text"
            fullWidth
          />
           <TextField
            autoFocus
            margin="dense"
            id="title"
            label="title"
            value={this.state.newData.title}
            onChange={(e)=>  {
              let{newData} =this.state;
              newData[0].title=e.target.value;
              this.setState({newData})
            }}
            type="text"
            fullWidth
          />
           <TextField
            autoFocus
            margin="dense"
            id="content"
            label="content"
            value={this.state.newData.content}
            onChange={(e)=>  {
              let{newData} =this.state;
              newData[0].content=e.target.value;
              this.setState({newData})
            }}
            type="text"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button 
            onClick={() => {
                      this.addItem()
                      this.handleClose()
                    }} 
            color="primary">
            Add
          </Button>
          <Button onClick={this.handleClose} color="primary">
            cancel
          </Button>
        </DialogActions>
      </Dialog>
    </div>
        <hr />
        {!isLoading ? <Post body={posts} /> : <h3>Loading...</h3>}
      </React.Fragment>
    );
  }
}


export default withStyles(useStyles)(App);

从“React”导入React；
导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“@material ui/core/Fab”导入晶圆厂；
从“@material ui/icons/Add”导入AddIcon；
从“@material ui/icons/Edit”导入EditIcon；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/Button”导入按钮；
const useStyles=主题=>({
晶圆厂：{
边距：主题。间距（1），
},
扩展图标：{
边缘光：主题。间距（1），
},
});
常量Post=（{body}）=>{
返回(
    
      
       
身份证
头衔
内容
      
      
      
      
{body.map（post=>{
const{u id，title，content}=post；
返回(
 
{{u id！=''？{u id:'-'}
            
{title！=''标题：'-'}
            
{content！=''内容：'-'}

);
})}
);
};
类应用程序扩展了React.Component{
状态={
孤岛加载：是的，
员额：[]，
错误：null，
开：错，
新数据：[
{
_id:“”，
标题：“”，
内容：“”
}
]
};
fetchPosts（）{
const axios=require（'axios'）；
axios
.get（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json")
。然后（响应=>{
这是我的国家({
帖子：response.data.posts，
孤岛加载：false，
})
//)
} )
}
componentDidMount（）{
this.fetchPosts（）；
}
handleClickOpen=（）=>
这是我的国家({
开放：是的
})
;
handleClose=（）=>
这是我的国家({
开放：假
})
;
//handleClick=（）=>
//    {
//{this.handleClickOpen}
//{this.addItem}
//    }
// ;
附加项=（）=>
{
var-temp=[]；
var tempPosts=this.state.posts；
var newData=this.state.newData[0]；
console.log（this.state.newData）
if（this.state.newData[0]。\u id&&this.state.newData[0]。title&&this.state.newData[0]。content）{
tempPosts.push（新数据）；
console.log（tempPosts）
this.setState（{posts:tempPosts}）
}
}   
render（）{
const{isLoading，posts}=this.state；
返回(
反应获取-博客
添加
订阅
{
设{newData}=this.state；
newData[0]。_id=e.target.value；
this.setState（{newData}）
}}
type=“text”
全宽
/>
{
设{newData}=this.state；
newData[0]。title=e.target.value；
this.setState（{newData}）
}}
type=“text”
全宽
/>
{
设{newData}=this.state；
newData[0]。内容=e.target.value；
this.setState（{newData}）
}}
type=“text”
全宽
/>
{
这是addItem（）
这个.handleClose（）
}} 
color=“primary”>
添加
取消

{！正在加载？：正在加载…}
);
}
}
导出默认样式（useStyles）（应用程序）；