reactjs 防止react应用在按下“后退”按钮时再次设置状态

aydmsdu9 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(159)

我正在构建一个简单的React应用程序，我使用API来设置状态，我使用Link进入详细页面，但当我从Link进入另一个页面并按下返回按钮时，它再次设置状态。但我试图防止再次设置状态，当我从返回按钮返回到页面时。
App.js

function MainPage() {
    const [blogs, setBlogs] = useStae([]);

    useEffect(() => {
        axios.get("/api/blogs/").then((res) => {
            setBlogs(res.data.blogs);
        }
    }

    return (
        <>
            {
               blogs.map((res) => <>

                   <b>{res.title}
                   // It is showing about 40 blogs.

                   <Link to={`blog-detail/${res.id}`}>Blog Detail</Link>4
                </>
            }
        </>
    )
}

当我点击Blog Detail并按下Browser（Chrome）中的按钮时，它再次处于设置状态。
"我尝试过什么"
1.我也曾考虑过Using LocalStorage with Redux Store，例如：-

const saveToLocalStorage = (state) => {
  try {
    localStorage.setItem('state', JSON.stringify(state));
  } catch (e) {
    console.error(e);
  }
};

但是数组的长度是40，那么我认为本地存储中的长度是Would it be efficient to store that big array (40 maybe 100(max))？
然后我取消了。
1.只使用localStorage，而不使用redux，但它毕竟是localStorage。
我已经尝试了很多次，但它仍然是设置状态与making请求后端服务器。
任何帮助都将不胜感激。

reactjs

来源：https://stackoverflow.com/questions/74286366/prevent-react-app-from-setting-state-again-when-pressed-back-button

1条答案

按热度按时间

alen0pnh1#

如果您希望MainPage组件在每次挂载时都不运行效果，则需要将Lift State Up绑定到一个公共父/祖先组件，该组件在应用的路由器匹配和渲染不同的路由内容/页面/组件时保持挂载状态。
您可以将blogs状态向上移动到呈现路由的组件，这样数据在挂载时只提取一次，并且在组件的生命周期内有效。不要忘记为useEffect挂钩包含一个依赖项数组！
示例：

const App = () => {
  const [blogs, setBlogs] = useState([]);

  useEffect(() => {
    axios.get("/api/blogs/")
      .then((res) => {
        setBlogs(res.data.blogs);
      });
  }, []); // <-- empty dependency array, run effect once on mount

  return (
    <Routes>
      <Route
        path="/blog"
        element={<MainPage blogs={blogs} />} // <-- pass blogs as prop
      />
      <Route
        path="/blog-detail/:id"
        element={<BlogDetails blogs={blogs} />} // <-- pass blogs as prop
      />
    </Routes>

  );
};

...

function MainPage({ blogs }) { // <-- consume blogs as prop
  return (
    <>
      {blogs.map((blog) => (
        <React.Fragment key={blog.id}>
          <b>{blog.title}</b>
          // It is showing about 40 blogs.

          <Link to={`blog-detail/${blog.id}`}>Blog Detail</Link>
        </React.Fragment>
      )}
    </>
  )
}

现在，在路由之间切换/导航将不再触发useEffect挂钩来重新获取博客数据。

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 防止react应用在按下“后退”按钮时再次设置状态

1条答案

相关问题

热门标签

最新问答