在react中从数组中筛选对象

Question

我正在使用axios从API获取数据。在我的发票详细信息页面上，当我试图使用此代码

获取仅一个发票的数据时

const id = props.match.params.id;
const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));

它返回一个对象或未定义但我只想要一个对象在一个数组内或一个空数组未定义我该怎么做?当我尝试使用。filter方法而不是。find方法时，它会将数组无限长时间地记录到控制台。

完整代码:

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import backIcon from '../assets/images/icon-arrow-left.svg'
import InvoiceDetailsHeader from './InvoiceDetailsHeader';
import { useSelector } from 'react-redux';
// remove this after adding DB
import data from '../data.json'
import InvoiceCardDetails from './InvoiceCardDetails';
const InvoiceDetails = (props) => {
const [invoiceData, setInvoiceData] = useState([]);
const id = props.match.params.id;
const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));
useEffect(() => {
setInvoiceData(invoice);
// console.log(invoiceData)
}, [id, invoice]);
return (
<div className="mx-auto px-12 py-16 w-full max-w-3xl">
<Link to="/" className="text-neutral text-xs"><img className="inline -mt-1 mr-4" src={backIcon} alt="back" /> Go back</Link>
<InvoiceDetailsHeader data={invoiceData} />
<InvoiceCardDetails data={invoiceData} />
</div>
)
}
export default InvoiceDetails

谁来帮帮我。

Answer 1

我认为这是因为你设置了setInvoiceData(invoice)，这在一开始是未定义的。所以检查一下

if(invoice){
setInvoiceData([invoice])
}

请试试这个

Answer 2

useEffect(() => {
if(invoice){
setInvoiceData([...invoiceData, invoice])
}
}, [id, invoice]);

Answer 3

首先，我不知道我是否错过了什么，但我不认为这是一个很好的方式发票是可能的对象和空数组。我认为更好的方法是划分条件，当没有找到ID时渲染发票。

---

如果使用过滤器方法代替查找，则过滤器方法每次返回一个新的数组实例。因此，当use Effect的第二个参数(invoice)发生变化时，use Effect的更新回调将继续重复。

const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id) ?? []);

你想要的可以简单地使用null合并操作符来完成。但是，[]也创建了一个新的数组实例，所以update回调会无限重复。

因此，为了使您想要的工作在当前的代码，请删除invoice从useEffect的依赖如下。

useEffect(() => {
setInvoiceData(invoice);
// console.log(invoiceData)
}, [id]);