小编use*_*446的帖子

我正在使用 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 …

您将如何动态地将自定义错误消息添加到使用 useFieldArray 生成的输入中？

这里非常简单的codesandbox - https://codesandbox.io/s/romantic-dubinsky-xd6f7?file=/src/App.js

通常我会写类似的东西{errors.name && <p>This can't be empty</p>}，但是使用 useFieldArray 输入的名称是动态生成的。我尝试过类似的方法{errors.items.index.name && <p>This can't be empty</p>}，但没有用。

有什么建议么？

我想比较 React 组件中的两个状态，它们都是通过单击按钮设置的。我的问题是，当单击第二个按钮时，会在状态更新之前立即调用比较函数，因此我不断收到“不匹配”消息。下面是代码的细分（这是一个按钮组件 - 通过 forEach 循环显示多次。有两个状态 - 第一个和第二个 - 都是整数）。

const handleSelection = (e) => {
    if (!first) {
        setFirst(e.target.dataset.id);
    } else if (!second) {
        setSecond(e.target.dataset.id);
        checkMatch();
    } else {
        setFirst(e.target.dataset.id);
        setSecond(undefined);
    }
}   

const checkMatch = () => {
    if(first === second) {
        console.log('match');
    } else {
        console.log('no match');
    }
}


return (
    <div className="grid-item">
        <button onClick={(e) => handleSelection(e)} data-id={item.number}>{item.number}</button>
    </div>
)