React + Typescript + MaterialUI 表にレコードを追加したい


reactもmaterialuiも初心者です  
質問用に余計なコードを除ければよいのですがすみません  
APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました

[code]

    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;
    
[/code]

[テンプレート](https://dev.classmethod.jp/articles/react-material-ui/)はこちらを参考にしています

実行すると、結果的に最初の10件しか表示されません  
API実行すると10件ずつ取得し`txHistoryResultAll`に格納されて、`transactionHistoryResult`にも反映されています  
lengthをとると10,20と増加しています  
追加で取得したレコードを表示させるにはどこが間違っている・どのように直すべきかご教示いただけるとありがたいです

質問ではないですが、  
わざわざ`txHistoryResultAll`に全件ためてから`transactionHistoryResult`に入れているのは、`transactionHistoryResult`に追加する方法が分からないためです(pushの類がわからず)  
本当は取得したレコードを追加表示したいのですが...




"ここを追加"とコメントアウトした行を追加して見てください。  
txHistoryResultAllとステートのtransactionHistoryResultをconcat（）で連結した後に、transactionHistoryResultにセットしています。

[code]

    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,
                    });
                }
                txHistoryResultAll = txHistoryResultAll.concat(transactionHistoryResult); // ここを追加
                apiTransactionHistoryResult(txHistoryResultAll);
            } else {
                alert('やり直して');
            }
        }
    
[/code]

原因はtxHistoryResultAllが、apiTransactionHistoryResultによるレンダーで、空の[]に初期化されているためです。コンポーネント関数では、レンダーされる度に維持できる値は、ステートのみの認識です。

恐らく動きは下記の通りです。  
１.初期レンダー  
・txHistoryResultAllが[]に初期化される

2.clickGet発火  
・txHistoryResultAllにresultの内容がpushされ、[{},×１０]の状態になる

3.apiTransactionHistoryResult実行  
・[{},×１０]の状態のtxHistoryResultAllをtransactionHistoryResultにセット  
・ステートセット時に行われるレンダーで、txHistoryResultAllが[]に初期化され、  
transactionHistoryResult.map((row: any, index: number)が実行される

1~3を繰り返しているため、[{},×１０]の状態のtxHistoryResultAllをステートにセットしているので、  
１０件の表示のまま変わらないのだと思います。




"ここを追加"とコメントアウトした行を追加して見てください。  
txHistoryResultAllとステートのtransactionHistoryResultをconcat（）で連結した後に、transactionHistoryResultにセットしています。

[code]

    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,
                    });
                }
                txHistoryResultAll = txHistoryResultAll.concat(transactionHistoryResult); // ここを追加
                apiTransactionHistoryResult(txHistoryResultAll);
            } else {
                alert('やり直して');
            }
        }
    
[/code]

原因はtxHistoryResultAllが、apiTransactionHistoryResultによるレンダーで、空の[]に初期化されているためです。コンポーネント関数では、レンダーされる度に維持できる値は、ステートのみの認識です。

恐らく動きは下記の通りです。  
１.初期レンダー  
・txHistoryResultAllが[]に初期化される

2.clickGet発火  
・txHistoryResultAllにresultの内容がpushされ、[{},×１０]の状態になる

3.apiTransactionHistoryResult実行  
・[{},×１０]の状態のtxHistoryResultAllをtransactionHistoryResultにセット  
・ステートセット時に行われるレンダーで、txHistoryResultAllが[]に初期化され、  
transactionHistoryResult.map((row: any, index: number)が実行される

1~3を繰り返しているため、[{},×１０]の状態のtxHistoryResultAllをステートにセットしているので、  
１０件の表示のまま変わらないのだと思います。

