我似乎无法弄清楚我的代码哪里出错了，导致我的应用程序无法完全呈现交易。我在 mySQL 和 React 中都仔细检查了我的变量，所以这不是变量问题。我不确定错误是否出在前端 (React) 方面，但我很确定确实如此。
这是我的 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>
);
}
这是我的交易卡代码：
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>
这是相关的Java代码：
@GetMapping("/jpa/users/{username}/transactions")
public List<Transaction> getAllTransactions(@PathVariable String username) {
return transactionJpaRepository.findByUsername(username);
}
这是我做卷曲时的发现：
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
这是我的 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;
}
}
一旦我跨过 transactionJpaRepository.findByUsername(username)，调试就会揭示这一点：
"Hibernate：选择transactio0_.id 作为id1_1_，transactio0_.account_name 作为account_2_1_，transactio0_.deposit_category 作为deposit_3_1_，transactio0_.notes 作为notes4_1_，transactio0_.transaction_amount 作为transact5_1_，transaction_0_.transaction_amount 作为transact5_1_，transaction_0_.transaction_amount 作为transact5_1_，transaction_0.transaction 作为_1_transaction_0.transaction_1_，transaction_0_.deposit_category 作为username8_1_, transactio0_.withdrawal_category 作为withdraw9_1_ from transaction transactio0_ where transactio0_.username=?"
答案 0 :(得分：1)
要遵循的代码很多，但是当我浏览这段代码时，有一点让我印象深刻...
您将状态管理的交易设置为这样的交易数组：
const [transactions, setTransactions] = useState([]);
然后你显然有一个本地对象从你的 TDS 承诺返回，称为“事务”，我猜它也是一个数组。
TransactionDataService.retrieveAllTransactions(username)
.then((transactions) => setTransactions([transactions]));
所以，如果这一切都是真的，那么这里的状态驱动 setTransactions 调用将获取 Promise-Returned 数组并将其包装到单个数组元素中...
因此，您在此之后的状态驱动交易将如下所示：
transactions = [
[ tx1, tx2, tx3, .... ]
]
在这种情况下，您的状态驱动事务对象中只有一条记录是有意义的。虽然那一条记录应该是所有交易的数组..
如果是这种情况，解决方案是修复您的 setTransactions 以不让 [] 包装您的承诺返回的交易数组。
也就是说，阅读评论确实听起来像 curl/后端需要在你点击这个之前解决。