我正在尝试使用springboot、reactjs和axios创建关于表行数据的delete函数。
我可以删除行数据时,我点击删除图标。但我不知道删除数据后如何重新绘制表中的数据。
如果你知道,请告诉我。
frontend:reactjs,材质表库,axios
后端:spring boot、sprind jpa、mysql
表.js
import React from 'react';
import MaterialTable from 'material-table';
import CheckListService from '../services/CheckList';
import { useEffect } from 'react'
import { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core';
import axios from 'axios'
//日本語化設定
const localizationJapanese = {
error: "エラー",
body: {
emptyDataSourceMessage: "表示するレコードがありません。",
filterRow: {
filterPlaceHolder: "",
filterTooltip: "フィルター",
},
editRow: {
saveTooltip: "保存",
cancelTooltip: "キャンセル",
deleteText: "この行を削除しますか?",
},
addTooltip: "追加",
deleteTooltip: "削除",
editTooltip: "編集",
},
header: {
actions: "編集・削除",
},
grouping: {
groupedBy: "グループ化:",
placeholder: "ヘッダーをドラッグ ...",
},
pagination: {
firstTooltip: "最初のページ",
firstAriaLabel: "最初のページ",
previousTooltip: "前のページ",
previousAriaLabel: "前のページ",
nextTooltip: "次のページ",
nextAriaLabel: "次のページ",
labelDisplayedRows: "{from}-{to} 全{count}件",
labelRowsPerPage: "ページあたりの行数:",
lastTooltip: "最後のページ",
lastAriaLabel: "最後のページ",
labelRowsSelect: "行",
},
toolbar: {
addRemoveColumns: "列の追加、削除",
nRowsSelected: "{0} 行選択",
showColumnsTitle: "列の表示",
showColumnsAriaLabel: "列の表示",
exportTitle: "出力",
exportAriaLabel: "出力",
exportCSVName: "CSV出力",
exportPDFName: "PDF出力",
searchTooltip: "検索",
searchPlaceholder: "検索",
searchAriaLabel: "検索",
clearSearchAriaLabel: "クリア",
},
};
//footer
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://material-ui.com/">
株式会社ウィラム. All rights reserved.
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
//独自CSS
const useStyles = makeStyles({
root: {
marginTop: '50px',
marginBottom: '50px',
}
});
export const Table = () => {
const classes = useStyles();
const [dataAll, setDataAll] = useState([]);
useEffect(() => {
CheckListService.getList().then((response) =>
setDataAll(response.data)
)
}, [])
const columns = [
{
title: 'リスト番号', field: 'listNo'
},
{
title: 'ソフトウェア名', field: 'softwareName'
},
{
title: '採用日', field: 'saiyouDate'
},
{
title: 'バージョン', field: 'version'
},
{
title: '種別', field: 'shubetu'
},
{
title: 'ライセンス', field: 'licenseManage'
},
{
title: '用途', field: 'youto'
},
{
title: '備考', field: 'bikou'
},
{
title: '承認者', field: 'authorizer'
},
{
title: '承認日', field: 'approvalDate'
},
{
title: 'URL', field: 'url'
}
]
return (
<div>
<div className="container">
<div className={classes.root}>
<MaterialTable
title="使用許可ソフトウェアリスト"
data={dataAll}
columns={columns}
style={{
marginTop: '50px',
whiteSpace: 'nowrap',
}}
options={{
headerStyle: {
backgroundColor: '#75A9FF',
color: '#FFF'
}
}}
localization={localizationJapanese}
actions={[
{
icon: 'edit',
tooltip: '編集',
onClick: (event, rowData) => window.confirm(rowData.listNo + "を編集しますか?")
},
{
icon: 'delete',
tooltip: '削除',
onClick: (event, rowData) => {
axios.get("http://localhost:8080/action/" + rowData.listNo)
.then(response => {
if (response.data != null) {
alert("delete success!");
let newDataAll = dataAll.filter(item => rowData.listNo)
setDataAll(newDataAll)
}
})
}
}
]}
/>
</div>
</div>
<Box pt={4}>
<Copyright />
</Box>
</div>
)
}
动作控制器.java
package com.example.demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.example.demo.repository.CheckListRepository;
import com.example.demo.service.CheckListService;
@CrossOrigin
@RequestMapping("action/")
@RestController
public class ActionController {
@Autowired
CheckListRepository clr;
@Autowired
CheckListService cls;
@RequestMapping(path = "{deleteId}")
public void deleteAction(@PathVariable Integer deleteId) {
clr.deletebyListNo(deleteId);
}
}
2条答案
按热度按时间0sgqnhkj1#
当我点击删除图标时,我可以用下面的方式重新绘制我的表数据
这样好吗?我已经做了,即使它可能不是好代码。
hfyxw5xn2#
你可以试试react redux。使用redux存储时,(表数据的)状态在需要时总是可用的。redux允许您将您的状态存储在所谓的“redux存储”中,并使用操作来调用reducer,而redux又反过来以您认为合适的方式操纵您的状态。
这里有一篇很好的文章,你可以跟着来学习和实现逻辑。