React useContext返回默认值而非预期值问题求助

核心问题 #

你在App组件顶层调用了useModal()，但App组件是ModalWrapper的父组件，并没有被ShowModalFnContext.Provider包裹，所以useContext只能拿到上下文的默认值，导致点击按钮时输出default block。

React Context的作用域是Provider包裹的子组件树，只有在Provider内部（包括深层嵌套的子组件）的组件，才能通过useContext获取到Provider提供的实际值，父组件不在这个范围内，自然会返回createContext时传入的默认函数。

解决方案 #

把需要调用useModal()的逻辑移到ModalWrapper的子组件中，也就是被Provider包裹的children内部：

步骤1：拆分组件，将useModal调用移到Provider范围内 #

// 抽离出需要使用Context的子组件，它会被ModalWrapper包裹
function CounterButton() {
  const [count, setCount] = useState(0);
  const showModal = useModal();

  return (
    <div className="card">
      <button
        onClick={() => {
          setCount(count + 1);
          showModal();
        }}
      >
        count is {count}
      </button>
      <p>
        Edit <code>src/App.tsx</code> and save to test HMR
      </p>
    </div>
  );
}

// 修改后的App组件
function App() {
  return (
    <ModalWrapper>
      <CounterButton />
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </ModalWrapper>
  );
}

步骤2：修正ModalWrapper的语法错误 #

原代码中<ModalWrapper缺少闭合的>，修正为<ModalWrapper>（这是笔误，但会影响组件渲染）。

验证效果 #

修改后，点击CounterButton里的按钮，控制台会输出useModal和hideModal，正确触发Provider提供的showModalFn函数，而不再执行默认的default block逻辑。

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