const searchInvoiceList = async ( plantLoc:字符串, 发票选项:字符串 )=> { 让数据:InvoiceData[] = []; 等待 axios .get(`${linkURL}inv/getControlList/${plantLoc}/${invoiceOption}`) .then((响应) => { 数据=响应.data.sqlData; }) .catch((错误) => console.error(错误)); 返回数据; }; const fetchInvoices = useQuery({ 查询键:[ “发票数据”, plantLocationOptionChecked.value, 发票选项检查.值, ], 查询Fn: () => 搜索发票列表( plantLocationOptionChecked.value, 发票选项检查值 ), 启用:假, 重试:0, }); if (fetchInvoices.isSuccess) { if (fetchInvoices.data.length === 0) { toast.error("搜索结果为空"); } setFetchedInvoiceData(fetchInvoices.data); } 如果(fetchInvoices.isError){ console.log(fetchInvoices.error); }</pre> <p>我有一个按钮,有一个onClick事件,调用fetchInvoices.refetch()时出现错误。第一个错误是“重新渲染次数过多。React限制了渲染次数以防止无限循环。”如果我去掉<code>setFetchedInvoiceData(fetchInvoices.data);</code>并且队列返回为0,它会触发我的react-hot-toast函数<code>toast.error("搜索结果为空");< ;/code> 但然后我会收到警告“在渲染不同的组件(App
”)时无法更新组件(Ie
)”。我做错了什么,如何修复这个问题?</p>
P粉5170907482023-08-16 18:54:18
在没有查看您整个组件的代码的情况下,很难为您提供最佳解决方案,但是目前在这里我看到您在每次重新渲染时都在fetchInvoices.isSuccess
上运行条件,解决的最佳方法是将其添加到useEffect
中,如下所示:
useEffect(() => { if (fetchInvoices.isSuccess) { if (fetchInvoices.data.length === 0) { toast.error("搜索结果为空"); } setFetchedInvoiceData(fetchInvoices.data); } if (fetchInvoices.isError) { console.log(fetchInvoices.error); } }, [fetchInvoices.isSuccess, fetchInvoices.isError])