0

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

2 件の回答 2

1

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

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('やり直して');
        }
    }

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

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

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

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

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

1
  • ありがとうございます。うまくいきました。私の変数がよくなかったこともあり、ほかにもない舌箇所があるので別途記載します。
    – nirgnehol
    Commented 2020年10月26日 0:48
0

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

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('やり直して');
    }
  }

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。