在React/Next.js中点击链接后数据不会更新

Question

在Next.js中，当点击

Link

时，新页面url将打开

"/component/product"

，但根据产品数据，我使用的redux商店中不会更新。它必须刷新页面才能更新状态数据。

import Link from "next/link";

<Link href="/component/product">All Products</Link>

//redux state
const { products } = useSelector(state => state.products);

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

问题已由

useEffect

解决，但另一个问题是

getProducts()

不断向服务器发送 API 请求。服务器将消耗更多内存和更多加载时间。

useEffect

如何在不刷新页面的情况下更新数据或停止持续发送API请求？

Answer 1

不要无条件获取产品。

useEffect

钩子在初始渲染周期之后以及任何依赖项更新时调度

getProducts

操作，例如

products

可能是每个渲染周期的新引用，因为它会在每个渲染周期获取并触发效果回调。

• 从依赖数组中删除

  products

  const { products } = useSelector(state => state.products);
  
  useEffect(() => {
    dispatch(getProducts());
  }, [dispatch]);
  

• 仅在特定条件下获取产品，例如如果

  products

  为 false 或空数组

  const { products } = useSelector(state => state.products);
  
  useEffect(() => {
    if (!products?.length) {
      dispatch(getProducts());
    }
  }, [dispatch, products]);
  

另请参阅等式比较和更新，您可以使用

shallowEqual

辅助函数来减少运行选择器函数的频率，并在必要时提供更稳定的

products

参考。

import { shallowEqual, useSelector } from 'react-redux';

const selectProducts = state => state.products;

...

const { products } = useSelector(selectProducts, shallowEqual);

useEffect(() => {
  if (!products?.length) {
    dispatch(getProducts());
  }
}, [dispatch, products]);