React Query的.isSuccess在我使用axios進行get請求時發生錯誤

Question

<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>

Answer 1

在沒有查看您整個元件的程式碼的情況下，很難為您提供最佳解決方案，但是目前在這裡我看到您在每次重新渲染時都在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])