API 調用 Reactjs

Question

我想改變市場的 state

方法：

 publishSample = () => {
    this.Service
      .publish()
      .then((response) => {
        this.setState({
          loading: true,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

我的組件：

            {loading ? (
              <div>{ENUM.PUBLISH}</div>
            ) : (
              <div>
                <p> {ENUM.CREATE}</p>
              </div>
            )}

在我上面的代碼中，每當我執行 API 調用時，我都想將值設置為“PUBLISH”，並且加載為真。 我能夠做到這一點，但每當我導航到其他頁面（即使沒有刷新），而不是 PUBLISH，我都會獲得“CREATE”的價值。 每當我進行 API 調用時，我想將 state 保存為 PUBLISH，並希望它在整個應用程序生命周期中保持“PUBLISH”。 誰能幫我這個。

Answer 1

您應該為此使用react-query ，因為那是服務器 state 並且不應保存到 redux，它應該僅用於客戶端 state。

您所有返回數據的 api 調用都將包裝在useQuery 掛鈎中，該掛鈎將自動重新獲取、緩存、同步並保持 state 處於最新狀態。 如果需要相同的數據，它還可以防止多個 api 調用。

要顯示加載 state，useQuery 返回一個狀態，該狀態可用於顯示該查詢的本地加載 state，或者您可以使用useIsFetching掛鈎來顯示當前是否正在獲取任何查詢。

這將在組件生命周期中持續存在，因此導航也適用。

要使用數據調用端點來更改某些內容，請使用 useMutation 掛鈎：

const [publishSample , { status, error }] = useMutation(this.Service.publish)

 {status === 'loading'? (
       <div>{ENUM.PUBLISH}</div>
        ) : (
         <div>
           <p> {ENUM.CREATE}</p>
         </div>
      )}