开发者问题收集

React.js 中的页面崩溃（读取未定义的属性）

2022-07-21
335
reactjs redux react-redux react-router redux-toolkit

在我的项目中，我使用的是 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 repo（这是我的 PET 项目） - https://github.com/stepan-slyvka/test-project

2个回答

问题是，在从 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 来创建它们，如果您需要生成唯一的 ID，请使用更像 uuid 的东西。

要解决您的特定问题，解决方法是仅对唯一的 id 值进行硬编码。即使只是完全胡言乱语，只要它能唯一地标识一个对象，就足够了（ 用于测试 ）。

示例： 

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

在搜索 INVOICES_LIST 数组的 InvoiceItem 组件中，请记住，当未找到匹配项时， Array.prototype.find 可能会返回 undefined 。UI 应该处理这个问题。仅当找到 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>
  );
};

编辑page-crashesreading-properties-of-undefined-in-react-js

Drew Reese
2022-07-22

所以，问题已经解决，总而言之，也许有人面临着同样的问题，我会写几句话。

首先，当您拥有像我这样的静态数据时（每次页面加载时都会呈现的 3 张发票） - 对您的 id 进行硬编码。

其次，对于新创建的项目，使用稳定的 id（例如 - uuid）并将其存储在某个地方（例如在本地存储中）。

第三，如果页面崩溃或出现错误渲染 - 请检查您的状态！在我的情况下，问题出在 InvoiceItem.js 文件中，我试图呈现 INVOICES_LIST，而不是使用 const invoices = useSelector((state) => state.invoice.invoices)

希望这对像我这样的人有所帮助 - redux 新手 :)

附言最终代码位于 此处

Stepan Slyvka
2022-07-24