I have very simple question.
I just moved top page by using setTimeout after editing data.
I could edit data, so I wanna move to top page.
I searched similar question and I found that it shouldn't be to set () when using a function.
But It doesn't work correctly.
Although I checked console, I couldn't find something to error.
Please tell me if you know.
import './App.css';
import { Table } from "./components/Table";
import React, { Component } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { Card, Form, Button, Col } from 'react-bootstrap';
const App = () => (
<BrowserRouter>
<div>
<Route exact path="/" component={ShowTable} />
<Route exact path="/edit/:id" component={Edit} />
</div>
</BrowserRouter>
);
const ShowTable = () => {
return (
<div>
<Table />
</div>
);
}
const Edit = props => {
const id = props.match.params.id;
const [dataOne, setDataOne] = useState({});
useEffect(() => {
axios.get("http://localhost:8080/action/edit/" + id).then((response) =>
setDataOne(response.data)
)
}, [])
const handleChange = event => {
setDataOne({ ...dataOne, [event.target.name]: event.target.value });
};
const handleSubmit = event => {
event.preventDefault();
const list = {
listNo: dataOne.listNo,
softwareName: dataOne.softwareName,
saiyouDate: dataOne.saiyouDate,
version: dataOne.version,
shubetu: dataOne.shubetu,
licenseManage: dataOne.licenseManage,
youto: dataOne.youto,
bikou: dataOne.bikou,
authorizer: dataOne.authorizer,
approvalDate: dataOne.approvalDate,
url: dataOne.url
}
axios.post("http://localhost:8080/action/edit/contents", list)
.then(response => {
if (response.data != null) {
alert("編集完了！")
setTimeout(() => ShowTable, 3000);
}
})
};
return (
<Card className={"border border-dark bg-dark text-white"}>
<Card.Header>
使用許可ソフトウェアリスト
</Card.Header>
<Form id="listFormId" onSubmit={handleSubmit}>
<Form.Group>
<Form.Control
type="hidden"
name="listNo"
value={dataOne.listNo || ""}
onChange={handleChange}
/>
</Form.Group>
<Card.Body>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>ソフトウェア名</Form.Label>
<Form.Control
type="text"
name="softwareName"
value={dataOne.softwareName || ""}
onChange={handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>採用日</Form.Label>
<Form.Control
type="text"
name="saiyouDate"
value={dataOne.saiyouDate || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>バージョン</Form.Label>
<Form.Control
type="text"
name="version"
value={dataOne.version || ""}
onChange={handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>種別</Form.Label>
<Form.Control
type="text"
name="shubetu"
value={dataOne.shubetu || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>ライセンス</Form.Label>
<Form.Control
type="text"
name="licenseManage"
value={dataOne.licenseManage || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>用途</Form.Label>
<Form.Control
type="text"
name="youto"
value={dataOne.youto || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>備考</Form.Label>
<Form.Control
type="text"
name="bikou"
value={dataOne.bikou || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>承認者</Form.Label>
<Form.Control
type="text"
name="authorizer"
value={dataOne.authorizer || ""}
onChange={handleChange} />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>承認日</Form.Label>
<Form.Control
type="text"
name="approvalDate"
value={dataOne.approvalDate || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>URL</Form.Label>
<Form.Control
type="text"
name="url"
value={dataOne.url || ""}
onChange={handleChange} />
</Form.Group>
</Form.Row>
</Card.Body>
<Card.Footer style={{ "textAlign": "right" }}>
<Button size="sm" variant="success" type="submit">
編集完了
</Button>
</Card.Footer>
</Form>
</Card>
)
}
export default App;
PS: 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'
import {
BrowserRouter as Router,
Route,
Switch,
useParams,
useHistory,
useLocation,
} from 'react-router-dom';
//日本語化設定
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 history = useHistory();
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}
