reactjs - React.js 中的页面崩溃(读取未定义的属性)

Question

在我的项目中，我使用 redux 工具包和 react router v6。我有带有“查看”按钮的发票列表，单击它时应该会打开包含发票说明的页面。我也有添加发票功能。添加发票并单击“查看”按钮时，页面崩溃并且控制台中显示错误:

Uncaught TypeError: Cannot read properties of undefined (reading 'invoice_num')

如果我单击现有项目并重新加载页面，也会发生同样的情况。它说错误发生在 InvoiceItem.js 页面中。

现在是代码。 InvoiceItem.js

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;

InvoiceItemDescription.js 文件

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;

和 Invoice.js 文件

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;

我不知道什么会导致页面崩溃。有人可以帮我解决这个问题吗？

附言这是我的 github 存储库(这是我的 PET 项目)- https://github.com/stepan-slyvka/test-project

Answer 1

问题在于，在从 src/components/Pages/Invoice/InvoicesList.js 导出的 INVOICES_LIST 测试发票数据中，您正在创建随机生成的 id属性。当页面重新加载时，整个应用程序将重新加载，INVOICES_LIST 将与所有新的 id 属性一起导出。从 URL 路径读取的 id 不再有效，InvoiceItem 无法呈现未定义的 invoice 对象。

export const INVOICES_LIST = [
  {
    id: Math.random().toString(), // <-- random each time app loads
    ...
  },
  {
    id: Math.random().toString(), // <-- random each time app loads
    ...
  },
  {
    id: Math.random().toString(), // <-- random each time app loads
    ...
  },
];

您真的希望 GUID 稳定、更具决定性并保证唯一性，所以不要使用 Math.random 来创建它们，使用更像 uuid 的东西如果您需要生成唯一 ID。

要解决您的特定问题，解决方法是硬编码一个唯一的 id 值。即使只是完全乱码，只要它唯一标识一个对象，就足够了(用于测试)。

例子:

export const INVOICES_LIST = [
  {
    id: '09u34otiuhnrfgp9ioj45',
    ...
  },
  {
    id: '234098ujh43gikoljaerpgiojaerg',
    ...
  },
  {
    id: '0934tpinr-9ujw3ensdsf',
    ...
  },
];

在搜索 INVOICES_LIST 数组的 InvoiceItem 组件中，请记住 Array.prototype.find 可能返回 undefined 当没有找到匹配项时。用户界面应该处理这个。仅在找到 invoice 时有条件地呈现 InvoiceItemDescription。

例子:

const InvoiceItem = () => {
  const { invoiceId } = useParams();

  const invoice = INVOICES_LIST.find((invoice) => invoice.id === invoiceId);

  return invoice ? (
    <InvoiceItemDescription
      invoice_num={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}
    />
  ) : (
    <div>No Invoices Found.</div>
  );
};