如何解决useState存储组件无法同步外部状态更新的问题？

你遇到的是闭包陷阱：当点击"Add"按钮时，创建的箭头函数() => <div>{count}</div>会捕获当时的count值快照，后续count更新时，旧函数依然持有旧值，因此渲染的数值不会同步变化。

一、修复当前测试代码的两种方法 #

方法1：存储数据而非渲染函数 #

不要把带闭包的函数存在状态里，而是存储元素的标识（比如数量标记），渲染时统一使用最新的count：

import { useState, ReactElement } from 'react';

function Test(): ReactElement {
    const [elements, setElements] = useState<Array<number>>([]);
    const [count, setCount] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(prev => prev + 1)}>+</button>
            <button onClick={() => setElements(prev => [...prev, prev.length])}>Add</button>
            {elements.map((_, index) => (
                <div key={index}>{count}</div>
            ))}
        </div>
    );
}

这里elements仅存储元素数量的标识，渲染时直接读取当前最新的count，自然能同步更新。

方法2：用useRef保存最新状态 #

如果必须存储渲染函数，用useRef同步最新的count值，让函数能访问实时数据：

import { useState, useRef, useEffect, ReactElement } from 'react';

function Test(): ReactElement {
    const [elements, setElements] = useState<Array<() => ReactNode>>([]);
    const [count, setCount] = useState(0);
    const countRef = useRef(count);

    // 每次count更新时同步到ref
    useEffect(() => {
        countRef.current = count;
    }, [count]);

    return (
        <div>
            <button onClick={() => setCount(prev => prev + 1)}>+</button>
            <button onClick={() => setElements(prev => [...prev, () => <div>{countRef.current}</div>])}>Add</button>
            {elements.map((Element, index) => (
                <Element key={index} />
            ))}
        </div>
    );
}

二、针对UI框架场景的最优方案 #

直接在Content组件中往Headerbar的状态存组件，会导致组件耦合度高且容易出现闭包问题。推荐使用Context + 自定义Hook的方案，实现跨组件通信同时保持解耦：

1. 创建Header上下文 #

import { createContext, useContext, useState, useCallback, ReactNode } from 'react';

// 定义上下文类型
type HeaderContextType = {
  addHeaderElement: (element: () => ReactNode) => void;
  removeHeaderElement: (index: number) => void;
  headerElements: Array<() => ReactNode>;
};

const HeaderContext = createContext<HeaderContextType | undefined>(undefined);

// 上下文Provider组件
export function HeaderProvider({ children }: { children: ReactNode }) {
  const [headerElements, setHeaderElements] = useState<Array<() => ReactNode>>([]);

  const addHeaderElement = useCallback((element: () => ReactNode) => {
    setHeaderElements(prev => [...prev, element]);
  }, []);

  const removeHeaderElement = useCallback((index: number) => {
    setHeaderElements(prev => prev.filter((_, i) => i !== index));
  }, []);

  return (
    <HeaderContext.Provider value={{ addHeaderElement, removeHeaderElement, headerElements }}>
      {children}
    </HeaderContext.Provider>
  );
}

// 自定义Hook，简化上下文调用
export function useHeader() {
  const context = useContext(HeaderContext);
  if (!context) {
    throw new Error('useHeader must be used within a HeaderProvider');
  }
  return context;
}

2. 实现Headerbar组件 #

import { useHeader } from './HeaderContext';

export function Headerbar() {
  const { headerElements } = useHeader();

  return (
    <header style={{ display: 'flex', gap: '16px', padding: '12px', background: '#f5f5f5' }}>
      <div>框架Logo</div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: '8px' }}>
        {headerElements.map((Element, index) => (
          <div key={index}>
            <Element />
          </div>
        ))}
      </div>
    </header>
  );
}

3. 在Content组件中使用 #

import { useState, useCallback } from 'react';
import { useHeader } from './HeaderContext';

export function Content() {
  const { addHeaderElement } = useHeader();
  const [count, setCount] = useState(0);

  // 用useCallback包裹，确保状态更新时函数能拿到最新值
  const headerCounter = useCallback(() => (
    <button onClick={() => setCount(prev => prev + 1)}>
      当前计数：{count}
    </button>
  ), [count]);

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={() => addHeaderElement(headerCounter)}>
        往Header添加计数器
      </button>
      <p>Content区域的计数：{count}</p>
    </div>
  );
}

4. 页面组合 #

import { HeaderProvider } from './HeaderContext';
import { Headerbar } from './Headerbar';
import { Content } from './Content';

export function Page() {
  return (
    <HeaderProvider>
      <Headerbar />
      <Content />
    </HeaderProvider>
  );
}

这个方案的优势：

• 组件解耦：Headerbar和Content无需直接关联，通过上下文通信
• 自动更新：useCallback确保状态变化时，Headerbar能渲染最新内容
• 可扩展性：轻松添加元素移除、顺序控制等功能

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