在Material-table中使用onClick事件时如何重绘表格中的数据

问题描述

我正在尝试使用 spring boot、reactjs 和 axios 创建关于表行数据的删除函数。
单击删除图标时，我可以删除行数据。但是我不知道如何在删除数据后重新绘制表格中的数据。
知道的请告诉我。
前端：Reactjs、材料表库、axios
后端：Spring Boot、sprint JPA、My sql
Table.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: '削除',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>
    )


}

ActionController.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);

    }

}

解决方法

你可以试试 React Redux 。通过使用 Redux 存储，（表数据的）状态在您需要时始终可用。 Redux 允许您将您的状态存储在所谓的“Redux 存储”中，并使用操作来调用减速器，这反过来又以您认为合适的方式操纵您的状态。

有一篇好文章here，可以跟着学习实现逻辑。

当我按以下方式单击删除图标时，我可以重绘我的表数据只需添加

CheckListService.getList().then((response) => setDataAll(response.data))

这是好方法吗？我已经完成了，尽管它可能不是好的代码。

axios java java material-table reactjs reactjs spring-boot