如何在React函数组件中导出状态常量total供其他文件使用

你当前的写法存在两个核心错误：

1. 函数组件内部通过useState定义的total是组件私有状态，作用域仅在当前组件内部，无法直接导出给其他文件使用
2. 你把useSelector(selectTotal)作为useState的初始值，仅会在组件首次挂载时读取一次Redux中存储的总价，后续Redux全局状态更新、你本地调用setTotal修改的值，既不会同步回Redux，其他组件也无法获取到你本地修改后的值，会出现状态不一致的问题。

不要在组件本地维护全局状态的副本，所有购物车相关的状态（单商品数量、购物车总价）统一放到Redux的basketSlice中管理，所有需要使用这些状态的组件，直接通过useSelector读取对应状态即可，不需要手动导出组件内部变量。 #

第一步：修正basketSlice逻辑 #

首先在你的basketSlice里补充加减商品数量的action，同时把selectTotal改成根据购物车商品列表、对应商品数量实时计算总价的选择器：

// slices/basketSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  items: [], // 存储购物车商品，每个商品带上count字段记录对应数量
};

export const basketSlice = createSlice({
  name: 'basket',
  initialState,
  reducers: {
    // 已有逻辑：从购物车移除指定商品
    removeFromBasket: (state, action) => {
      const index = state.items.findIndex(item => item.id === action.payload.id);
      if (index >= 0) state.items.splice(index, 1);
    },
    // 新增：给指定商品增加购买数量
    incrementItemCount: (state, action) => {
      const targetItem = state.items.find(item => item.id === action.payload.id);
      if (targetItem) targetItem.count += 1;
    },
    // 新增：给指定商品减少购买数量，数量为1时直接移除商品
    decrementItemCount: (state, action) => {
      const targetItem = state.items.find(item => item.id === action.payload.id);
      if (!targetItem) return;
      if (targetItem.count <= 1) {
        state.items = state.items.filter(item => item.id !== action.payload.id);
      } else {
        targetItem.count -= 1;
      }
    },
    // 新增：添加商品到购物车，已存在则累加数量，不存在则新增count=1的商品记录
    addToBasket: (state, action) => {
      const targetItem = state.items.find(item => item.id === action.payload.id);
      if (targetItem) {
        targetItem.count +=1;
      } else {
        state.items.push({...action.payload, count: 1});
      }
    }
  },
});

// 导出所有action方法
export const { removeFromBasket, incrementItemCount, decrementItemCount, addToBasket } = basketSlice.actions;

// 修正总价选择器：实时遍历购物车商品计算总价
export const selectTotal = (state) => 
  state.basket.items.reduce((total, item) => total + item.price * item.count, 0);
// 辅助选择器：根据商品id获取对应商品的购买数量
export const selectItemCountById = (id) => (state) => {
  const item = state.basket.items.find(item => item.id === id);
  return item ? item.count : 0;
}

export default basketSlice.reducer;

第二步：修正CheckoutProduct组件 #

移除组件本地存储的total、count状态，所有状态读取、修改都直接走Redux流程：

import { StarIcon } from '@heroicons/react/solid'
import NumberFormat from 'react-number-format';
import Image from 'next/image'
import { useDispatch, useSelector } from 'react-redux';
import { removeFromBasket, incrementItemCount, decrementItemCount, selectItemCountById } from '../slices/basketSlice'

function CheckoutProduct({ id, title, price, rating, description, category, image, hasPrime }) {
  const dispatch = useDispatch()
  // 直接从Redux读取当前商品的购买数量，不需要本地维护
  const count = useSelector(selectItemCountById(id))

  const addItemToBasket = () => {
    // 触发Redux action更新全局状态
    dispatch(incrementItemCount({ id }))
  }

  const removeItemFromBasket = () => {
    dispatch(removeFromBasket({ id }))
  }

  const removeNumber = () => {
    dispatch(decrementItemCount({ id }))
  }
 
  return (
      <div className='flex flex-col space-y-2 m-auto justify-content-end'>
            <div className='flex items-center'>
              <button onClick={addItemToBasket} className='button mr-auto'>+</button>
              <span className='p-2'>{count}</span>
              <button onClick={removeNumber} className='button ml-auto'>-</button>
            </div>
            <button className='button' onClick={removeItemFromBasket}>Remove From Cart</button>
          </div>
  )
}

export default CheckoutProduct

第三步：其他组件调用总价 #

任何需要用到购物车总价的组件，只要直接引入selectTotal调用useSelector就能拿到实时更新的全局总价，不需要从CheckoutProduct组件导出：

import { useSelector } from 'react-redux';
import { selectTotal } from '../slices/basketSlice';

function CheckoutSummary() {
  // 任意组件内都可以直接获取最新的购物车总价
  const total = useSelector(selectTotal);
  return (
    <div className='checkout-summary'>
      订单总价：<NumberFormat value={total} displayType={'text'} thousandSeparator={true} prefix={'$'} />
    </div>
  )
}

不要尝试通过props层层传递、ref透传的方式把组件内部的total向外传递，这类实现会打乱状态来源，后续维护很容易出现状态不同步的bug，全局状态统一放在Redux管理是最合理的方案。

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