Reactjs 使用React查询从API筛选提取的列表

我使用React Query（第一次）来管理对API的调用。我正在获取发票列表，到目前为止，我已经在下面的代码中成功地完成了这项工作。现在，我想使用一系列复选框，根据每个发票对象具有的状态属性筛选此列表-它是“已支付”、“待定”或“草稿”

我该怎么办？过滤是否可以以某种方式集成到对API的初始调用中，以便我始终接收一组数据，或者我必须进行多个调用并相应地在下面呈现数据

import React from 'react'
import {useQuery} from 'react-query'
import InvoiceLink from './InvoiceLink'

const fetchData = async () => {
    const res = await fetch('http://localhost:3004/invoices');
    return res.json();
};


export default function InvoiceList() {
    const {data, isLoading, isError} = useQuery('invoices', fetchData);
    return (
        <div>
            <ul>
                <li><input type="checkbox" id="paid"></input><label htmlFor="paid">Paid</label></li>
                <li><input type="checkbox" id="pending"></input><label htmlFor="pending">Pending</label></li>
                <li><input type="checkbox" id="draft"></input><label htmlFor="draft">Draft</label></li>
            </ul> 
            {isError && (
                <p>Error</p>
            )}
            {isLoading && (
                <p>Loading</p>
            )}
            <ul>
            {data && data.map(item => 
                <InvoiceLink key={item.id} invoice={item} />
            )}
            </ul>
        </div>
    )
}

从“React”导入React
从“react query”导入{useQuery}
从“/InvoiceLink”导入InvoiceLink
const fetchData=async（）=>{
const res=等待取数（'http://localhost:3004/invoices');
返回res.json（）；
};
导出默认函数InvoiceList（）{
const{data，isLoading，isError}=useQuery（'invoices'，fetchData）；
返回(

支付
未决
草稿

{isError&&(
错误

)}
{isLoading&&(
装载

)}

{data&&data.map（项=>
)}

)
}

仅请求api一次，根据响应的数据进行过滤，而不进行react查询

导出默认函数InvoiceList（）{
const{data，isLoading，isError}=useQuery（'invoices'，fetchData）；
//在这里过滤数据
常量isPaid=data.find（…）
const isPending=data.find（…）
const isDraft=data.find（…）
返回(

支付
未决
草稿

{isError&&(
错误

)}
{isLoading&&(
装载

)}

{data&&data.map（项=>
)}

)
}

或在fetchData方法中过滤数据

const fetchData=async（）=>{
const res=等待取数（'http://localhost:3004/invoices');
const data=res.json（）；
返回{
数据：数据，
isPaid:data.find（…），
isPending:data.find（…），
isDraft:data.find（…），
}
};

您可以按照说明进行本地筛选，或者，如果您想在后端进行筛选，您需要：

• 将筛选条件保留在本地状态
• 将筛选条件添加到查询键以触发自动重新蚀刻（每次键更改时，react query refetch）
• 将筛选条件传递给fetchFn，然后传递给后端
• 可能使用

  keepPreviousData:true

  获得更好的用户体验-请参阅

比如：

const fetchData = async (filter) => {
    const res = await fetch(`http://localhost:3004/invoices/${filter}`);
    return res.json();
};

const [filter, setFilter] = React.useState('all')
const {data, isLoading, isError} = useQuery(['invoices', filter], () => fetchData(filter));

另外，我想指出的是，由于您使用的是

fetch

，因此需要将错误响应转换为失败的承诺，因为react查询需要失败的承诺，但

fetch

并不能立即完成。请看