在我的项目中,我正在使用redux工具包和react router v6.我有带有"查看"按钮的发票列表,当单击它时,应该会打开带有发票描述的页面.此外,我还添加了发票功能.添加发票后,我单击"查看"按钮,页面崩溃,控制台中的错误显示:
未捕获类型错误:无法读取未定义的属性(读取"invoice\u num")
如果单击现有项并重新加载页面,也会发生同样的情况.它说错误发生在InvoiceItem中.js页面.
现在是代码.100
import React from "react";
import { useParams } from "react-router-dom";
import InvoiceItemDescription from "../Invoice/InvoiceItemDescription";
import { INVOICES_LIST } from "./InvoicesList";
const InvoiceItem = () => {
const params = useParams();
const invoice = INVOICES_LIST.find(
(invoice) => invoice.id === params.invoiceId
);
return (
<InvoiceItemDescription
invoiceNumber={invoice.invoice_num}
status={invoice.status}
order_date={invoice.order_date}
bill_from={invoice.bill_from}
bill_from_address={invoice.bill_from_address}
bill_from_email={invoice.bill_from_email}
bill_from_fax={invoice.bill_from_fax}
bill_from_phone={invoice.bill_from_phone}
bill_to={invoice.bill_to}
bill_to_address={invoice.bill_to_address}
bill_to_email={invoice.bill_to_email}
bill_to_fax={invoice.bill_to_fax}
bill_to_phone={invoice.bill_to_phone}
item_name={invoice.ITEMS.item_name}
unit_costs={invoice.ITEMS.unit_costs}
unit={invoice.ITEMS.unit}
price={invoice.ITEMS.price}
/>
);
};
export default InvoiceItem;
100文件
import React from "react";
import Wrapper from "../../UI/Wrapper";
import Footer from "../../UI/Footer";
import classes from "./InvoiceItemDescription.module.css";
import { Link } from "react-router-dom";
const InvoiceItemDescription = (props) => {
let counter = 1;
return (
<Wrapper isShrinked={props.isShrinked}>
<div className={classes.wrapper}>
<div className={classes["content-wrapper"]}>
<div className={classes["main-wrapper"]}>
<div className={classes["upper-buttons"]}>
<div className={classes["upper-buttons-wrapper"]}>
<Link to="/invoices">
<button type="button" className={classes["go-to-invoices"]}>
Go To Invoices
</button>
</Link>
<Link to="/invoices/edit-invoice">
<button type="button" className={classes["edit-invoice"]}>
Edit Invoice
</button>
</Link>
</div>
</div>
<div className={classes.content}>
<div className={classes["invoice-info"]}>
<div className={classes.info}>
<h3>Invoice Info</h3>
<span>{props.invoiceNumber}</span>
</div>
<div className={classes.order}>
<p>
<span className={classes["order-status"]}>
Order Status:
</span>
<span className={classes.status}>{props.status}</span>
</p>
<p>
<span className={classes["order-date"]}>Order Date:</span>
<span className={classes.date}>{props.order_date}</span>
</p>
</div>
</div>
<div className={classes.bills}>
<div className={classes["bill-from"]}>
<h3>Bill From</h3>
<div>
<p className={classes["bill-from-info"]}>
<span className={classes.name}>{props.bill_from}</span>
<span className={classes.email}>
{props.bill_from_email}
<br></br>
<br></br> {props.bill_from_address}
<br></br>
<br></br>
<br></br> {props.bill_from_phone}
</span>
</p>
</div>
</div>
<div className={classes["bill-to"]}>
<h3>Bill To</h3>
<p className={classes["bill-to-info"]}>
<span className={classes.name}>{props.bill_to}</span>
<span className={classes.email}>
{props.bill_to_email} <br></br>
<br></br> {props.bill_to_address} <br></br>
<br></br>
<br></br>
{props.bill_to_fax} <br></br> {props.bill_to_phone}
</span>
</p>
</div>
</div>
<div className={classes.table}>
<table>
<colgroup>
<col className={classes.col1}></col>
<col className={classes.col2}></col>
<col className={classes.col3}></col>
<col className={classes.col4}></col>
<col className={classes.col5}></col>
</colgroup>
<thead>
<tr>
<td>#</td>
<td>Item Name</td>
<td>Unit Costs</td>
<td>Unit</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>{counter++}</td>
<td>{props.item_name}</td>
<td>{props.unit_costs}</td>
<td>{props.unit}</td>
<td>{props.price}</td>
</tr>
</tbody>
</table>
</div>
<div className={classes.total}>
<p>
Sub-total:
<span>$13300</span>
</p>
<p>
Vat:
<span>$13300</span>
</p>
<h3>
Grand Total:
<span>$14630</span>
</h3>
</div>
</div>
<div className={classes["lower-btn"]}>
<button type="button">Send Invoice</button>
</div>
</div>
</div>
</div>
<Footer />
</Wrapper>
);
};
export default InvoiceItemDescription;
和100文件
import React from "react";
import classes from "./Invoice.module.css";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { invoiceActions } from "../../store/invoice-slice";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
const Invoice = (props) => {
const { id, invoice_num, bill_from, bill_to, status } = props.invoiceItem;
const dispatch = useDispatch();
const removeInvoiceItem = () => {
dispatch(invoiceActions.removeInvoice(id));
};
return (
<tr className={classes.height}>
<td>
<span className={classes.checkbox}>
<input type="checkbox"></input>
</span>
</td>
<td>
<span>{invoice_num}</span>
</td>
<td>
<span>{bill_from}</span>
</td>
<td>
<span>{bill_to}</span>
</td>
<td>
<span>14300</span>
{/* This should be a dynamic value later */}
</td>
<td>
<span
className={`${
status === "Pending" ? classes["status-pending"] : ""
} ${status === "Delivered" ? classes["status-delivered"] : ""} ${
status === "Shipped" ? classes["status-shipped"] : ""
}`}
>
{status}
</span>
</td>
<td>
<div className={classes.buttons}>
<Link to={`/invoices/invoice-description/${id}`}>
<button className={classes["view-btn"]}>View</button>
</Link>
<button className={classes["delete-btn"]} onClick={removeInvoiceItem}>
<FontAwesomeIcon icon={faTrash} />
</button>
</div>
</td>
</tr>
);
};
export default Invoice;
我不知道是什么导致了页面崩溃.有人能帮我做这个吗?
P、 这是我的github回购(这是我最喜欢的项目)-https://github.com/stepan-slyvka/test-project