我正在react中制作一个采购发票应用程序。
应用程序中现在有两个页面
一个是创建新发票的页面，可以保存到数据库并导出到excel文件。(Invoice.js(
另一个是发票列表的页面，每个发票都有修改/删除按钮。(Invoices.js(
当单击列表的修改按钮中的发票时，它将链接到创建页面，并且作为状态的发票数据将作为参数传递。
在不将发票数据传递到创建页面的情况下，导航完全没有问题
但是，在我将"state"属性放入Link组件后，会发生以下错误。
Invoices.js:21
未捕获类型错误：无法读取Invoices.js:21:1
Array.filter((
Invoice.js:2:1
invokePassiveEffectCreate(react-dom.development.js:23487:1(
HTMLUnknownElement.callCallback(react-dom.development.js:3945:1(
处的未定义属性invokeGuardedCallback(react-dom.development.js:4056:1
以下是我的源代码
//App.js
const App = () => {
return (
<BrowserRouter>
<Container maxWidth="lg">
<NavBar />
<Routes>
<Route path="/" exact element={<Navigate to="/invoice/create" />} />
<Route path="/invoice/create" element={<Invoice />} />
<Route path="/invoice/view" element={<Invoices />} />
</Routes>
</Container>
</BrowserRouter>
);
};
//Invoices.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getInvoices } from '../../actions/invoices';
import InvoiceRow from './InvoiceRow';
const Invoices = () => {
const [month, setMonth] = React.useState(new Date().getMonth() + 1);
const invoices = useSelector((state) => state.invoices);
const dispatch = useDispatch();
const [invoicesCurrent, setInvoicesCurrent] = React.useState([]);
useEffect(() => {
dispatch(getInvoices());
}, [dispatch]);
useEffect(() => {
setInvoicesCurrent(invoices.filter((invoice) => Number(invoice.invoiceDate.substring(5, 7)) === month));
}, [invoices, month, dispatch]);
...
// Link component used: invoice is the one of invoice in invoices state
<Link to='/invoice/create'
state={{ ...invoice }}>
<Button>Modify</Button>
</Link>
//Invoice.js
const InvoiceComponent = () => {
const location = useLocation();
const invoice = location.state;
const [company, setCompany] = useState(invoice ? invoice.company : '');
const [employee, setEmployee] = useState(invoice ? invoice.employee : '');
const [invoiceDate, setInvoiceDate] = useState(invoice ? invoice.invoiceDate : new Date());
const [orderId, setOrderId] = useState(invoice ? invoice.orderId : '');
const [companyTel, setCompanyTel] = useState(invoice ? invoice.companyTel : '');
const [companyFax, setCompanyFax] = useState(invoice ? invoice.companyFax : '');
const items = useSelector((state) => state.items);
const dispatch = useDispatch();
useEffect(() => {
const last = document.getElementById(`row-${items.length - 1}-0`);
if (last != null) last.focus();
}, [items.length]);
useEffect(() => {
if (invoice) {
dispatch(updateItems(invoice.items));
}
}, [dispatch, invoice]);
...
我必须分享当前应用程序的行为。
- 单击"修改"按钮时，创建页面将加载发票数据
- 然后，使用"返回"、"前进"或单击指向这两个页面中任何一个页面的链接进行导航会显示上部错误
- 在Invoices.js中调用setInvoicesCurrent的useEffect钩子中，
当我控制台.log(发票(时，它不是发票的数组，而是invoice.js中使用的其他状态(项(的数组 - 刷新页面会重置所有内容
导航时是否有管理redux存储的指南？
//console.log(发票(在useEffect中调用setInvoicesCurrent
//正常打开：
发票
(6([｛…｝，｛…}，｛..｝，｛…｝]
0:｛_id:"1"，公司："cmp1"，员工："e1"，发票日期：'2022-01-07T05:14:15.482Z'，订单id:"，…｝
1:｛_id:"2"，公司："cmp2"，员工："e1"，发票日期："2022-01-07T05:14:15.482Z"，orderId:"，…｝
2:｛_id:"3"，公司："comp3"，员工："e1"，invoiceDate:"2022-01-07T05:14:15.482Z"，订单id:"，…｝
3:｛_id:"4"，公司："comp4"，员工："e1"，发票日期：'2022-01-07T05:14:15.482Z'，订单id:"，…｝
4:｛_id:"5"，公司："comp5"，员工："e1"，发票日期："2022-01-07T05:14:15.482Z"，orderId:"，…｝
5:｛_id:"6"，公司："comp6"，员工："e1"，invoiceDate:"2022-01-07T13:10:56.380Z"，订单ID:"，…｝
长度：6[[原型]]：阵列(0(每个数组都有以下数据
0:
公司："cmp1">
公司传真："1222222222">
公司电话："122331232">
员工："e1">
发票日期："2022-01-07T05:14:15.482Z">
项目：数组(2(
0:｛name:"item1"，规格："spec1"，数量：1，价格：10000，总数：10000，…｝
1:｛名称："item2"，规格："spec2"，数量：20，价格：1000，总计：20000，…}
长度：2
[[原型]]：数组(0(
modifiedOn:"2022-01-07T05:25:4.771Z">
订单ID:"quot
__v:0
_id:"1〃//console.log(发票(发生错误时：
发票
(6([数组(2(、数组(2数组(2(
0:｛name:"item1"，规格："spec1"，数量：1，价格：10000，总计：10000，…｝
1:｛名称："item2"，规格："spec2"，数量：20，价格：1000，总计：20000，…}
长度：2
[[Prototype]]：数组(0(
1:Array(2(
0:｛name:'item1'，规格："spec1"，数量：1，价格：10000，总计：10000，…｝
1:｛名称："item2"，规格："spec2"，数量：20，价格：1000，总计：20000，…｝
[[Prototype]]：数组(0
您不应该将数组解构为对象，它会创建一个对象。
使用类似于
// Invoices.js
<Link to="/invoice/create" state={{ invoice }}>
<Button>Modify</Button>
</Link>;
// Invoice.js
const { invoice } = location.state;
注意：
const a = [1,2,3];
console.log({...a}); // {0: 1, 1: 2, 2: 3}