React中useBetween共享状态修改后未全局同步的解决办法

云原生阿岚

2026-7-4

使用useBetween实现React状态全局同步的解决方案

核心问题定位

你遇到的状态不同步问题，大概率是共享Hook的写法不符合useBetween的要求，导致多个页面创建了独立的状态实例，而非共享同一个状态。

正确实现步骤

1. 编写符合要求的共享状态Hook

确保只对原始自定义Hook执行一次useBetween包装，然后导出这个处理后的Hook供所有页面使用：

// sharedCostState.js
import { useState } from 'react';
import { useBetween } from 'use-between';

// 原始状态Hook，内部定义需要共享的状态
const useCostState = () => {
  const [costByPortion, setCostByPortion] = useState(0);
  const [extraAdditions, setExtraAdditions] = useState([]);

  return {
    costByPortion,
    setCostByPortion,
    extraAdditions,
    setExtraAdditions
  };
};

// 导出经过useBetween处理的共享Hook，确保全局只有一个状态实例
export const useSharedCost = () => useBetween(useCostState);

2. 在页面中统一导入共享Hook

所有需要使用该共享状态的页面，直接导入上面导出的useSharedCost，而非各自重新包装原始Hook：

// 页面A：修改状态
import { useSharedCost } from './sharedCostState';

const PageA = () => {
  const { costByPortion, setCostByPortion } = useSharedCost();

  return (
    <div>
      <p>当前份价：{costByPortion}</p>
      <button onClick={() => setCostByPortion(prev => prev + 10)}>增加10元</button>
    </div>
  );
};

// 页面B：同步显示状态
import { useSharedCost } from './sharedCostState';

const PageB = () => {
  const { costByPortion } = useSharedCost();

  return <div>页面B同步显示份价：{costByPortion}</div>;
};