React自定义Hook无法读取Reducer更新后的值问题

问题根源 #

你遇到的核心问题是页面组件与Table组件各自独立调用了useTable Hook，这会生成两个完全隔离的状态实例：Table组件内的setColumnSort更新的是自身Hook实例的状态，而页面读取的是自己调用useTable生成的另一个独立状态，自然无法获取到更新后的值。

解决方案 #

方案一：状态提升到页面组件，通过Props传递 #

将useTable的调用统一放在页面层级，把需要的方法通过props传递给Table组件，确保整个页面共享同一个状态实例。

修改页面组件

// 页面组件
import Table from './Table';
import useTable from '../hooks/useTable';

const PageComponent = () => {
  // 页面统一调用useTable，获取唯一状态实例
  const tableState = useTable();

  // 在这里可以直接读取更新后的状态
  console.log('页面读取的状态：', tableState.overAllState);

  return (
    <div>
      {/* 将需要的方法传递给Table组件 */}
      <Table setColumnSort={tableState.setColumnSort} />
    </div>
  );
};

修改Table组件

移除内部的useTable调用，改为接收props传入的方法：

// Table组件
import Checkbox from "./checkbox";

const Table = ({ setColumnSort }) => {
  return (
    <div>
      Test quote and quote table
      <Checkbox
        label="test"
        onChangeFunc={() => setColumnSort("hipothethicalColumn", "asc")}
      />
    </div>
  );
};

export default Table;

方案二：使用Context共享状态 #

通过React Context创建全局共享的状态容器，让页面和Table组件共享同一个useTable实例。

创建TableContext

// src/contexts/TableContext.tsx
import { createContext, useContext } from 'react';
import useTable from '../hooks/useTable';

// 定义Context类型，匹配useTable的返回值
const TableContext = createContext<ReturnType<typeof useTable> | null>(null);

// 提供状态的Provider组件
export const TableProvider = ({ children }) => {
  const tableState = useTable();
  return (
    <TableContext.Provider value={tableState}>
      {children}
    </TableContext.Provider>
  );
};

// 自定义Hook，简化Context获取
export const useTableContext = () => {
  const context = useContext(TableContext);
  if (!context) {
    throw new Error('useTableContext必须在TableProvider内部使用');
  }
  return context;
};

在页面层级包裹Provider

// 页面组件/App组件
import { TableProvider } from './contexts/TableContext';
import Table from './Table';

const PageComponent = () => {
  return (
    <TableProvider>
      <div>
        <Table />
        {/* 页面内直接读取共享状态 */}
        {() => {
          const { overAllState } = useTableContext();
          return <div>当前排序列：{overAllState.currentSortedColumn}</div>;
        }}
      </div>
    </TableProvider>
  );
};

修改Table组件使用Context

// Table组件
import Checkbox from "./checkbox";
import { useTableContext } from '../contexts/TableContext';

const Table = () => {
  const { setColumnSort } = useTableContext();
  return (
    <div>
      Test quote and quote table
      <Checkbox
        label="test"
        onChangeFunc={() => setColumnSort("hipothethicalColumn", "asc")}
      />
    </div>
  );
};

export default Table;

注意事项 #

• 自定义Hook每次调用都会创建独立的状态实例，若要共享状态，必须确保只有一个Hook实例被创建，或通过状态提升、Context实现共享。
• 你的reducer逻辑本身没有问题，问题完全出在状态的作用域隔离上。

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