如何制作一个在页面之间更新数据的 React Hooks

Question

我正在尝试创建一个自定义挂钩来存储购物车数据。

购物车对象：

{ uid:Quantity, uid2:Quantity2, ...}

我所做的 Hook：

import { useState } from "react";

// Return a new object without empty values
const clean = (obj) =>
  Object.keys(obj).reduce((acc, key) => {
    if (obj[key]) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});

export const useCart = () => {
  // Cart is [uid]=quantity
  const [cart, setCart] = useState({});

  const updateCart = ({ uid = 0, quantity = 1 }) => {
    const newCart = clean({
      ...cart,
      [uid]: quantity > 0 ? quantity : null
    });

    setCart(newCart);
    console.log(" New Cart : ", JSON.stringify(newCart));
  };

  // Do are they reactive ? Or do we need to useState them
  const count = Object.values(cart).reduce((acc, value) => acc + value, 0);

  // Return all
  return { cart, updateCart, setCart, count };
};

我遇到的问题

购物车正常工作对于单个项目来说很好，但是当我更新 DOM 并重新请求购物车数据时，它们又回到了初始值。

我很确定这是因为 updateCart() 是用初始值初始化的，但没有更新......但我不知道该怎么做？

我还尝试在组件上直接使用 setCart() 而不是 updateCart() 但没有更好的。

我做了一个例子来测试它没有我的项目： https://codesandbox.io/s/reverent -tess-8pymji

谢谢。

Answer 1

问题是每次路由改变时，它都会重新初始化你的 React hook，并且也会重新初始化该 hook 上的状态。

您可能希望将自定义挂钩创建为单例，以便它可以在不同路由上的多个组件之间共享状态。

react-singleton-hook< /strong> 是一个非常简洁的库，您可以使用它来做到这一点。

您必须稍微更新一下钩子的实现：

import { useState } from "react";
import { singletonHook } from "react-singleton-hook";

// Return a new object without empty keys
const clean = (obj) =>
  Object.keys(obj).reduce((acc, key) => {
    if (obj[key]) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});

export const useCartImpl = () => {
  // Cart is [uid]=quantity
  const [cart, setCart] = useState({});
  const updateCart = ({ uid = 0, quantity = 1 }) => {
    const newCart = clean({
      ...cart,
      [uid]: quantity > 0 ? quantity : null
    });

    setCart(newCart);
    console.log(" New Cart : ", JSON.stringify(newCart));
  };

  // Do are they reactive ? Or do we need to useState them
  const count = Object.values(cart).reduce((acc, value) => acc + value, 0);

  // Return all
  return { cart, updateCart, setCart, count };
};

export const useCart = singletonHook({}, useCartImpl);

这里有一个更新CodeSandbox供您参考。