React Query的.isSuccess在我使用axios進行get請求時發生錯誤
P粉153503989
P粉153503989 2023-08-15 23:34:15
0
1
461
<p><br />></p>
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,
  });
  如果(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粉153503989
P粉153503989

全部回覆(1)
P粉517090748

在沒有查看您整個元件的程式碼的情況下,很難為您提供最佳解決方案,但是目前在這裡我看到您在每次重新渲染時都在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])
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板