71472


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の類がわからず)  
本当は取得したレコードを追加表示したいのですが...


CC BY-SA 4.0
2020-10-23T07:27:04.967
71454
2020-10-26T00:53:49.130
2020-10-23T07:33:53.307
27721
27721
question
reactjs typescript react-jsx material-ui
React + Typescript + MaterialUI 表にレコードを追加したい


"ここを追加"とコメントアウトした行を追加して見てください。  
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をステートにセットしているので、  
１０件の表示のまま変わらないのだと思います。


CC BY-SA 4.0
2020-10-24T03:59:40.480
71472
2020-10-24T03:59:40.480
32699
71454
answer


いただいたアドバイスにより以下のようにすることでうまくいきました。  
抜粋しています。

[code]

    let txHistoryResultAll: any = []; // constだと配列をを追加できない(concat行でエラー)ので let に変更
    
    const ConsoleTransactionHistoryCoin: React.FC = () => {
      const classes = useStyles();
      const [transactionHistoryResult, apiTransactionHistoryResult] = useState<any>(null);
    
      const clickGet = async () => {
        const result = await apiTransactionHistoryCoin();
        const txHistoryResult: any = []; // 取得したデータを配列にまとめます
        if (result.isSuccess) {
          for (const row of result.data) {
            txHistoryResult.push({
              from_name: row.from_name,
              to_name: row.to_name,
              comment: row.comment,
            });
          }
          txHistoryResultAll = txHistoryResultAll.concat(txHistoryResult); // アドバイスいただいたところ
          apiTransactionHistoryResult(txHistoryResultAll);
        } else {
          alert('やり直して');
        }
      }
    
    
[/code]


CC BY-SA 4.0
2020-10-26T00:53:49.130
71504
2020-10-26T00:53:49.130
27721
71454
answer