React Prevent 在页面更改时重新获取

Question

我目前正在开发一个 React 应用程序，该应用程序从我的后端获取一些内容，结果非常繁重。我的意图是让组件保持活动状态，并防止每次用户从一个页面切换到另一个页面时重新呈现。目前我正在获取所有数据并使用 react-redux 和 thunk 存储它。

我想通过单击按钮保留刷新选项。

我试过将组件包装在 React.memo 组件中，但没有成功。

这是我的代码，以防你能帮助我：

这是我不想重新渲染的组件，除非刷新状态发生变化：

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getNFTs } from "../../actions/NFT";

export const LandList = React.memo(() => {
  const { gettingNFTs, NFTs } = useSelector((state) => state.NFT);
  const [refresh, setRefresh] = useState(0);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getNFTs());
  }, []);

  return (
    <div>
      <h2>LandList</h2>
      {gettingNFTs ? <p>getting nfts...</p> : <p>Done</p>}
    </div>
  );
});

这是我对商店的操作（我在这里使用 thunk）：

export const getNFTs = () => {
  return async (dispatch) => {
    dispatch(getNFTsAction());

    const resp = await fetchWithoutToken("marketplace");
    const body = await resp.json();

    dispatch(finishGetNFTsAction(body.publishedLands));
    console.log(body);
  };
};

const getNFTsAction = () => ({
  type: types.NFTsGetStart,
});

const finishGetNFTsAction = (NFT) => ({
  type: types.NFTsGetFinished,
  payload: NFT,
});

如有任何帮助，我们将不胜感激！

Answer 1

你可以使用 redux 或 context hook 来做，创建一个全局标志并在第一次成功请求后更改它，并在 useEffect hook 中创建一个条件

export const LandList = React.memo(() => {
  const { gettingNFTs, NFTs } = useSelector((state) => state.NFT);
  const [refresh, setRefresh] = useState(0);
  const dispatch = useDispatch();

  useEffect(() => {
  // here is the global variable or property , check it before your dispatch
   if(!fetched){ 
    dispatch(getNFTs());
   }
  }, []);

  return (
    <div>
      <h2>LandList</h2>
      {gettingNFTs ? <p>getting nfts...</p> : <p>Done</p>}
    </div>
  );
});

React Prevent 在页面更改时重新获取

React Prevent re-fetching on page changing

reactjs

redux

redux-thunk

react-redux

use-effect