我是React中redux和redux工具包的新手.js.尽我最大的努力使我的宠物项目申请future 的工作,但面临一个问题.我试着描述一下.

首先,代码.发票切片中的removeInvoice函数.js文件:

import { createSlice } from "@reduxjs/toolkit";

import { INVOICES_LIST } from "../Pages/Invoice/InvoicesList";

const invoiceSlice = createSlice({
  name: "invoice",
  initialState: {
    invoices: INVOICES_LIST,
  },
  reducers: {
    addNewInvoice(state, action) {
      const newItem = action.payload;
      state.invoices.push({
        id: newItem.id,
        billFrom: newItem.bill_from,
        billFromAddress: newItem.billFromAddress,
        billTo: newItem.bill_to,
        billToAddress: newItem.bill_to_address,
        invoiceNumber: newItem.invoice_num,
      });
      console.log(newItem);
    },
    removeInvoice(state, action) {
      const id = action.payload;
      state.invoices = state.invoices.filter((item) => item.id !== id);
      console.log(action);
      console.log(state.invoices);
    },
    editInvoice() {},
  },
});

export const invoiceActions = invoiceSlice.actions;

export default invoiceSlice;

INVOICES_LIST看起来像这样:

export const INVOICES_LIST = [
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "Pineapple Inc.",
    bill_to: "REDQ Inc.",
    total_cost: "14630",
    status: "Pending",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: {
      item_name: "A box of happiness",
      unit_costs: "200",
      unit: "14",
      price: "2800",
      sub_total: "133300",
      vat: "13300",
      grand_total: "14630",
    },
  },
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "AMD Inc.",
    bill_to: "Intel Inc.",
    total_cost: "14630",
    status: "Delivered",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: {
      item_name: "Unicorn Tears",
      unit_costs: "500",
      unit: "14",
      price: "1700",
      sub_total: "133300",
      vat: "13300",
      grand_total: "14630",
    },
  },
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "Apple Inc.",
    bill_to: "Samsung",
    total_cost: "14630",
    status: "Shipped",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: {
      item_name: "Rainbow Machine",
      unit_costs: "700",
      unit: "5",
      price: "3500",
      sub_total: "133300",
      vat: "13300",
      grand_total: "14630",
    },
  },
];

我映射发票的AllInvoices.js个文件:

import React, { Fragment } from "react";
import { useDispatch, useSelector } from "react-redux";
import { uiActions } from "../../store/ui-slice";
// import { invoiceActions } from "../../store/invoice-slice";
import { INVOICES_LIST } from "../Invoice/InvoicesList";

import Wrapper from "../../UI/Wrapper";
import Card from "../../UI/Card";
import Footer from "../../UI/Footer";
import Button from "../../UI/Button";
// import InvoiceItemDescription from "./InvoiceItemDescription";
// import EditInvoiceItem from "./EditInvoiceItem";

import classes from "./AllInvoices.module.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
// import AddInvoiceItem from "./AddInvoiceItem";
import { Link } from "react-router-dom";
import Invoice from "./Invoice";

const AllInvoices = (props) => {
  // const { id } = props;

  const dispatch = useDispatch();

  const toggleSelectOptions = () => {
    dispatch(uiActions.toggleSelectOptions());
  };

  // const removeInvoiceItem = (id) => {
  //   dispatch(invoiceActions.removeInvoice(id));
  // };

  const showMoreOptions = useSelector(
    (state) => state.ui.selectOptionsIsVisible
  );

  // const invoice = useSelector((state) => state.invoices);

  return (
    <Fragment>
      <Wrapper isShrinked={props.isShrinked}>
        <Card>
          <h1 className={classes.header}>Invoice</h1>
          <div className={classes.content}>
            <div className={classes["btn-wrapper"]}>
              <Link to="/invoices/add-invoice">
                <Button>Add Invoice</Button>
              </Link>
            </div>
            <div className={classes.invoices}>
              {showMoreOptions && (
                <ul className={classes.list}>
                  <li>Select all invoices</li>
                  <li>Unselect all</li>
                  <li>Delete selected</li>
                </ul>
              )}
              <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>
                  <col className={classes.col6}></col>
                  <col className={classes.col7}></col>
                </colgroup>
                <thead className={classes["table-head"]}>
                  <tr>
                    <th className={classes.position}>
                      <span className={classes.checkbox}>
                        <input type="checkbox"></input>
                      </span>
                      <FontAwesomeIcon
                        icon={faChevronDown}
                        className={classes.chevron}
                        onClick={toggleSelectOptions}
                      />
                    </th>
                    <th>
                      <span className={classes["thead-text"]}>Number</span>
                    </th>
                    <th>
                      <span className={classes["thead-text"]}>Bill From</span>
                    </th>
                    <th>
                      <span className={classes["thead-text"]}>Bill To</span>
                    </th>
                    <th>
                      <span className={classes["thead-text"]}>Total Cost</span>
                    </th>
                    <th>
                      <span className={classes["thead-text"]}>Status</span>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {INVOICES_LIST.map((invoice, index) => (
                    <Invoice
                      key={index}
                      invoiceItem={{
                        id: invoice.id,
                        invoice_num: invoice.invoice_num,
                        bill_from: invoice.bill_from,
                        bill_to: invoice.bill_to,
                        status: invoice.status,
                      }}
                    />
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Card>
        <Footer />
      </Wrapper>
    </Fragment>
  );
};

export default AllInvoices;

我应该使用removeInvoice的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;

101它似乎从数组中删除了发票,因为数组从3个项目更改为2个,并在控制台负载中显示了我想要通过单击按钮删除的项目的适当id,但UI console.log here没有反映这些更改,仍然有3个发票项目,而不是2个或更少.有人知道问题出在哪里吗?

我已经try 了很多变体,比如将id传递给这样的函数:

const removeInvoiceItem = (id) => {
dispatch(invoiceActions.removeInvoice(id));

};

try 使用花括号:

const removeInvoiceItem = (id) => {
dispatch(invoiceActions.removeInvoice({ id }));

};

还try 了匿名函数:

<button className={classes["delete-btn"]} onClick={() => removeInvoiceItem(id)}>
        <FontAwesomeIcon icon={faTrash} />
      </button>

等等我知道,如果用户界面没有改变,那么状态也不会改变,但在我的情况下,我会这样覆盖状态:

state.invoices = state.invoices.filter((item) => item.id !== id);

所以,我不知道还能做什么.想到useSelector并try 如下:

const invoice = useSelector((state) => state.invoices);

在 map 功能中:

{invoice.map((invoice, index) => (
                <Invoice
                  key={index}
                  invoiceItem={{
                    id: invoice.id,
                    invoice_num: invoice.invoice_num,
                    bill_from: invoice.bill_from,
                    bill_to: invoice.bill_to,
                    status: invoice.status,
                  }}
                />
              ))}

但它 destruct 了页面并告诉我这个错误:Uncaught TypeError: invoice.map is not a function.

所以,我不知道还能做什么.请帮帮我!!!

P、 我是stackoveflow的新手,如果有什么问题,很抱歉:)

推荐答案

问题是,您使用常量INVOICE\u列表来映射元素,而不是store 的当前状态.

您使用INVOICE\u LIST初始化切片,这很好.但是你没有使用你初始化的东西,你只是使用了常数,这就是为什么用户界面保持不变.

您应该使用useSelector访问该状态,如下所示:

const invoiceList = useSelector(state => state.invoice.invoices)

在您的情况下,这应该是正确的语法:

state.sliceName.wantedProperty

现在,当您映射到"invoiceList"而不是"INVOICE_LIST"时,这应该可以做到!

Javascript相关问答推荐

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

如何在输入元素中附加一个属性为checkbox?

在运行时使用Next JS App Router在服务器组件中运行自定义函数

当输入字段无效时,我的应用程序不会返回错误

如何在JAVASCRIPT中合并两组对象并返回一些键

MongoDB受困于太多的数据

按什么顺序接收`storage`事件?

使用Document.Evaluate() Select 一个包含撇号的HTML元素

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

未找到用于 Select 器的元素:in( puppeteer 师错误)

如何使用Reaction路由导航测试挂钩?

Django模板中未加载JavaScript函数

在点击链接后重定向至url之前暂停

正在发出错误的URL请求

观察子组件中的@Output事件emits 器?

Redux不更新状态

Reaction Chart.js为显示格式化日期的xax提供相同的差距

Reactjs创建新选项卡而不是新窗口

导航栏中显示项目的方式有问题

基于单击按钮更改椭圆的填充/取消填充状态,同时跟踪用户是否 Select 另一种 colored颜色