为什么我的交易没有呈现？ --反应 & Java

Question

I can't seem to figure out where I'm going wrong in my code to cause my app to not completely render the transactions. I double-checked my variables in both mySQL & in React, so it's not a variable issue. I'm not sure if the error lies on the front-end (React) side, but I'm fairly sure that it does.

Here is my code for TransactionsList:

function TransactionsList() {

 const [transactions, setTransactions] = useState([]);
 
 useEffect(() => {
   let username = AuthenticationService.getLoggedInUserName();
   TransactionDataService.retrieveAllTransactions(
     username
   ).then((transactions) => setTransactions([transactions]));
  }, []);
   
  return (
    <CardColumns style={{ padding: "20px" }}>
      {transactions.map((transaction) => (
        <TransactionCard transaction={transaction} />
      ))}
    </CardColumns>
  );
}

Here is my code for TransactionCard:

const username = AuthenticationService.getLoggedInUserName();

  TransactionDataService.retrieveTransaction(username, useState.id).then(
    (response) =>
      useState({
        accountName: response.data.accountName,
        transactionDate: response.data.transactionDate,
        transactionType: response.data.transactionType,
        depositCategory: response.data.depositCategory,
        withdrawalCategory: response.data.withdrawalCategory,
        transactionAmount: response.data.transactionAmount,
        notes: response.data.notes,
      })
  );
    

export default function TransactionCard(props) {
  const classes = useStyles();

  const [expanded, setExpanded] = useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };
 
 const { transaction } = props; 

//  const { data: transactions } = useSWR((url) =>
//    fetch(url).then((_) => _.json())
//  );
 
  const getTransactions = (url) => fetch(url).then((_) => _.json());

  const { data: transactions } = useSWR(
    `http://localhost:8080/jpa/users/${username}/transactions`,
    getTransactions
  );

  useEffect(() => {
    console.log(transactions);
  }, [transactions]);
 
  function handleEdit(id) {
    console.log("handle edit");
    alert("you clicked edit");
  }

  function handleDelete(id) {
    console.log("handle delete");
  }

  return (
    <>
      <Card className={classes.card}>
        <center>
          <CardHeader tag="h3">{transaction.accountName}</CardHeader>
          <CardText>{transaction.transactionType}</CardText>
          <CardText>
            {moment.utc(transaction.transactionDate).format("MMM-DD-YYYY")}
          </CardText>
          <CardText>{transaction.depositCategory}</CardText>
          <CardText>{transaction.withdrawalCategory}</CardText>
          <CardText>{"$" + parseFloat(transaction.transactionAmount)}</CardText>
        </center>

Here is the relevant Java code:

@GetMapping("/jpa/users/{username}/transactions")
    public List<Transaction> getAllTransactions(@PathVariable String username) {
        return transactionJpaRepository.findByUsername(username);
    }

Here are my findings from when I did a curl:

StatusCode        : 200        
StatusDescription :
Content           : [{"id":200
                    1,"usernam 
                    e":"Tim"," 
                    accountNam 
                    e":"BOA"," 
                    transactio 
                    nDate":"20 
                    21-03-13T0 
                    2:19:33.00 
                    0+00:00"," 
                    transactio 
                    nType":"de 
                    posit","de 
                    positCateg 
                    ory":"payr 
                    oll","with 
                    drawalCate 
                    gory":null 
                    ,"transact 
                    ionAmount" 
                    ...        
RawContent        : HTTP/1.1   
                    200        
                    Vary: Orig
                    in,Access- 
                    Control-Re 
                    quest-Meth 
                    od,Access- 
                    Control-Re 
                    quest-Head 
                    ers        
                    Transfer-E 
                    ncoding: 
                    chunked    
                    Keep-Alive 
                    :
                    timeout=60 
                    Connection 
                    :
                    keep-alive 
                    Content-Ty 
                    pe: applic 
                    ation/json 
                    Da...
Forms             : {}
Headers           : {[Vary, Or
                    igin,Acces 
                    s-Control- 
                    Request-Me 
                    thod,Acces 
                    s-Control- 
                    Request-He 
                    aders], [T
                    ransfer-En
                    coding,    
                    chunked],  
                    [Keep-Aliv 
                    e, timeout 
                    =60], [Con 
                    nection, k 
                    eep-alive] 
                    ...}       
Images            : {}
InputFields       : {}
Links             : {}
ParsedHtml        : mshtml.HTM
                    LDocumentC
                    lass
RawContentLength  : 1387

Here is my POJO:

@Entity
public class Transaction {
    
    @Id
    @GeneratedValue
    private long id;
    private String username;
    private String accountName;
    private Date transactionDate;
    private String transactionType;
    private String depositCategory;
    private String withdrawalCategory;
    private double transactionAmount;
    private String notes;

    protected Transaction() {
        
    }

    public Transaction(long id, String username, String accountName, Date transactionDate, String transactionType,
            String depositCategory, String withdrawalCategory, double transactionAmount, String notes) {
        super();
        this.id = id;
        this.username = username;
        this.accountName = accountName;
        this.transactionDate = transactionDate;
        this.transactionType = transactionType;
        this.depositCategory = depositCategory;
        this.withdrawalCategory = withdrawalCategory;
        this.transactionAmount = transactionAmount;
        this.notes = notes;
    }


    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getAccountName() {
        return accountName;
    }

    public void setAccountName(String accountName) {
        this.accountName = accountName;
    }

    public Date getTransactionDate() {
        return transactionDate;
    }

    public void setTransactionDate(Date transactionDate) {
        this.transactionDate = transactionDate;
    }

    public String getTransactionType() {
        return transactionType;
    }

    public void setTransactionType(String transactionType) {
        this.transactionType = transactionType;
    }

    public String getDepositCategory() {
        return depositCategory;
    }

    public void setDepositCategory(String depositCategory) {
        this.depositCategory = depositCategory;
    }

    public String getWithdrawalCategory() {
        return withdrawalCategory;
    }

    public void setWithdrawalCategory(String withdrawalCategory) {
        this.withdrawalCategory = withdrawalCategory;
    }

    public double getTransactionAmount() {
        return transactionAmount;
    }

    public void setTransactionAmount(double transactionAmount) {
        this.transactionAmount = transactionAmount;
    }

    public String getNotes() {
        return notes;
    }

    public void setNotes(String notes) {
        this.notes = notes;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + (int) (id ^ (id >>> 32));
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Transaction other = (Transaction) obj;
        if (id != other.id)
            return false;
        return true;
    }
}

Debugging reveals this once I stepped over transactionJpaRepository.findByUsername(username) : "Hibernate: select transactio0_.id as id1_1_, transactio0_.account_name as account_2_1_, transactio0_.deposit_category as deposit_3_1_, transactio0_.notes as notes4_1_, transactio0_.transaction_amount as transact5_1_, transactio0_.transaction_date as transact6_1_, transactio0_.transaction_type as transact7_1_, transactio0_.username as username8_1_, transactio0_.withdrawal_category as withdraw9_1_ from transaction transactio0_ where transactio0_.username=?"

Answer 1

It's a lot of code to follow, but one thing stands out at me when I glance over this code...

You set your state-managed transactions up to be an array of transaction as such:

const [transactions, setTransactions] = useState([]);

Then you clearly have a local object coming back from your TDS promise called "transactions" which I'm guessing would ALSO be an array.

TransactionDataService.retrieveAllTransactions(username)
.then((transactions) => setTransactions([transactions]));

So if that's all true, then your state-driven setTransactions call here is taking your Promise-Returned array and wrapping it into a single-array element...

So your state-driven transactions after this would look like:

transactions = [
   [ tx1, tx2, tx3, .... ]
]

In this case, it makes sense that your state-driven transactions object only has one record in it. Although that one-record should be the array of all transactions..

If this is the case, the solution is to fix your setTransactions to NOT have a [] wrapping your promise-returned transactions array.

That said, reading the comments it does sound like curl/back-end needs addressing before you hit this.