在TanStack Table单元格调用Zustand Hook触发ESLint错误的解决方法

方案1：将单元格内容封装为独立React组件（推荐） #

这是最符合React Hook规则的标准做法，把原本写在cell函数里的逻辑抽成一个大写开头的React组件，在组件内部合法调用Hook：

// 定义独立的单元格组件
const CartQuantityCell = ({ row }) => {
  const product = row.original;
  const productId = product.id;
  
  // 合法调用Zustand Hook
  const cart = useCartStore((state) => state.cart);
  const updateQuantity = useCartStore((state) => state.updateQuantity);
  const removeItem = useCartStore((state) => state.removeFromCart);

  const cartItem = cart.find((item) => item.id === productId);
  const quantity = cartItem ? cartItem.quantity : product.quantity;

  // 返回单元格的交互内容
  return (
    <div className="cart-cell">
      <input 
        type="number" 
        min="1"
        value={quantity} 
        onChange={(e) => updateQuantity(productId, Number(e.target.value))}
      />
      <button onClick={() => removeItem(productId)} className="remove-btn">删除</button>
    </div>
  );
};

// 在TanStack Table列配置中使用该组件
const columns = [
  // 其他列配置...
  {
    header: '购物车数量',
    cell: ({ row }) => <CartQuantityCell row={row} />,
  },
];

方案2：直接访问Zustand Store（非响应式场景） #

如果你的场景不需要实时响应购物车数据变化（仅静态展示），可以直接调用Zustand Store的getState()方法获取状态，避开Hook调用限制：

// 假设你的Zustand Store实例是这样创建的
const useCartStore = create((set, get) => ({
  cart: [],
  updateQuantity: (id, qty) => { /* 状态更新逻辑 */ },
  removeFromCart: (id) => { /* 状态更新逻辑 */ },
}));

// 直接获取Store实例
const cartStore = useCartStore;

// 在cell函数中使用
const columns = [
  {
    header: '购物车数量',
    cell: ({ row }) => {
      const product = row.original;
      const productId = product.id;
      
      // 直接获取当前状态
      const cart = cartStore.getState().cart;
      const cartItem = cart.find((item) => item.id === productId);
      const quantity = cartItem ? cartItem.quantity : product.quantity;

      // 调用Store方法时同样使用getState()
      return (
        <div>
          <span>{quantity}</span>
          <button onClick={() => cartStore.getState().removeFromCart(productId)}>删除</button>
        </div>
      );
    },
  },
];

⚠️ 注意：这种方式不会自动订阅Store变化，当购物车数据更新时单元格不会自动重新渲染，仅适合静态展示或手动处理更新的场景。

方案3：父组件预取数据注入表格 #

如果表格数据与购物车数据关联紧密，可以在表格所在的父组件中先获取完整的购物车数据，将数量信息预注入到每行产品数据中，避免在cell函数中调用Hook：

// 表格所在的父组件
const ProductTable = () => {
  const cart = useCartStore((state) => state.cart);
  // 假设原始产品列表为products
  const productsWithCartData = products.map(product => {
    const cartItem = cart.find(item => item.id === product.id);
    return {
      ...product,
      cartQuantity: cartItem ? cartItem.quantity : product.quantity,
    };
  });

  const columns = [
    {
      header: '购物车数量',
      cell: ({ row }) => {
        // 直接使用预计算好的cartQuantity
        return <span>{row.original.cartQuantity}</span>;
      },
    },
  ];

  return <TanStackTable data={productsWithCartData} columns={columns} />;
};

内容的提问来源于stack exchange，提问作者Eilron Escalante