reactもmaterialuiも初心者です
質問用に余計なコードを除ければよいのですがすみません
APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました
import React, { useState } from 'react';
import GenericTemplate from '../lib/GenericTemplate';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import apiTransactionHistoryCoin from '../lib/apiTransactionHistoryCoin'
const useStyles = makeStyles({
table: {
minWidth: 650,
},
});
const txHistoryResultAll: any = [];
const ConsoleTransactionHistoryCoin: React.FC = () => {
const classes = useStyles();
const [transactionHistoryResult, apiTransactionHistoryResult] = useState<any>(null);
const clickGet = async () => {
const result = await apiTransactionHistoryCoin(); // 実行すると10件ずつ取得
if (result.isSuccess) {
for (const row of result.data) {
txHistoryResultAll.push({
from_name: row.from_name,
to_name: row.to_name,
comment: row.comment,
});
}
apiTransactionHistoryResult(txHistoryResultAll);
} else {
alert('やり直して');
}
}
return (
<GenericTemplate title="送金履歴">
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">内容</TableCell>
</TableRow>
</TableHead>
<TableBody>
{transactionHistoryResult !== null && transactionHistoryResult.map((row: any, index: number) => (
<TableRow key={index}>
<TableCell align="left">{String(index) + ' ' + row.from_name + 'から' + row.to_name + 'へ ' + row.comment}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<input type="button" value="Get" onClick={clickGet} />
</GenericTemplate >
);
}
export default ConsoleTransactionHistoryCoin;
テンプレートはこちらを参考にしています
実行すると、結果的に最初の10件しか表示されません
API実行すると10件ずつ取得しtxHistoryResultAll
に格納されて、transactionHistoryResult
にも反映されています
lengthをとると10,20と増加しています
追加で取得したレコードを表示させるにはどこが間違っている・どのように直すべきかご教示いただけるとありがたいです
質問ではないですが、
わざわざtxHistoryResultAll
に全件ためてからtransactionHistoryResult
に入れているのは、transactionHistoryResult
に追加する方法が分からないためです(pushの類がわからず)
本当は取得したレコードを追加表示したいのですが...