useRef结合useContext时值无法重绘的问题及解决方法咨询

你遇到的核心问题是useRef的current属性更新不会触发React组件重渲染。React组件仅在自身state变化、props变化或父组件重渲染时才会重新渲染，而useRef的更新属于"静默"更新，不会触发这些机制。

要解决这个问题，需要用useState替代useRef来管理计数状态，因为useState的更新会触发组件重渲染，同时Context会自动将更新后的状态同步给子组件。

修改后的完整代码： #

1. 上下文定义与根组件(App)

import React, { useState, useContext } from 'react';

export const ContactContext = React.createContext();

function App() {
  // 用useState替代useRef管理计数状态
  const [count, setCount] = useState(1);

  // 把状态和更新方法传入Context
  const contextValue = { count, setCount };

  return (
    <ContactContext.Provider value={contextValue}>
      <div>
        <AddValue />
      </div>
      <div>
        <Logo />
      </div>
    </ContactContext.Provider>
  );
}

2. AddValue组件（更新计数）

const AddValue = () => {
  const { setCount } = useContext(ContactContext);

  const addItemHandler = () => {
    // 使用setCount更新状态，触发重渲染
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <button onClick={addItemHandler}>
        <img src="plus.svg" alt="plus logo" />
      </button>
    </div>
  );
};

3. Logo组件（渲染计数）

function Logo() {
  const { count } = useContext(ContactContext);

  return (
    <p data-testid="statistics">
      Count of channels: {count} <br />
    </p>
  );
}

关键说明： #

• 使用useState管理状态，确保状态更新时触发App组件重渲染，进而让Context的Provider更新value，触发子组件重渲染
• 在Context中传递setCount方法，让子组件可以安全地更新状态（使用函数式更新prevCount => prevCount +1避免状态依赖问题）
• Logo组件直接使用Context中的count值，无需访问current属性，状态更新时会自动重新渲染

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