在我的项目中,我正在使用redux工具包和react router v6.我有带有"查看"按钮的发票列表,当单击它时,应该会打开带有发票描述的页面.此外,我还添加了发票功能.添加发票后,我单击"查看"按钮,页面崩溃,控制台中的错误显示:

未捕获类型错误:无法读取未定义的属性(读取"invoice\u num")

Error here

如果单击现有项并重新加载页面,也会发生同样的情况.它说错误发生在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

推荐答案

问题是,在从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值.即使是完全的胡言乱语,只要它唯一地标识一个对象,就足够了(for testing).

例子:

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>
  );
};

Edit page-crashesreading-properties-of-undefined-in-react-js

Reactjs相关问答推荐

在Redux工具包查询中,是否可以将标记应用到API切片内的所有端点?

如何在与AntD的react 中限制文件上传和显示消息?

我如何在不被 destruct 的情况下将导航栏固定在顶部?

根据用户 Select 的注册类型更改表单字段

React Todo List 应用程序我在实现删除功能时遇到问题

无法使用react-hook-form和react-places-autocomplete在字段中输入值

提前输入错误:选项类型上不存在属性名称

使用 nextjs App Router 在动态客户端进行服务器端渲染

使用 MuiCssBaseline 在所有 MUI v5 标签上设置边距 0

我正在通过 API(有效)从 MongoDB 传递数据.可视化但我不断收到此 TypeError: Cannot convert undefined or null to object

状态链接未传递到路由页面

如何在 React map 函数循环中使用
标签

从一个获取 axios 请求(ReactJS)中删除默认参数

将路径数组传递给Route会引发错误

react 本机日历

如何从一组对象映射 MUI 5 图标并更改其 colored颜色 ?

列表应该有一个唯一的关键props

axios post方法中的请求失败,状态码为500错误

运行开发服务器时如何为 Vite 指定运行时目录

我可以在类组件中使用 useState 挂钩吗?