reactjs useReducer和userContext Typescript未按预期工作

7jmck4yq  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(146)

这是我第一次使用useReduceruseContextTypescript,我正在创建一个简单的计数器。我试图更新count使用递增和递减分派,但它不改变,并没有在终端错误。
下面是codesandbox的链接:codesandbox
谢谢你

a8jjtwal

a8jjtwal1#

当使用上下文时,Provider需要位于组件树中比消费者更高的位置。代码中最上面的组件是App,它会立即尝试执行useContext(CountContext)。但由于它上面没有提供程序,App只是获取上下文的默认值,这意味着dispatch是一个空函数() => {}
你需要把你的组件分开。在树的顶部附近呈现提供程序,然后在树的更下方使用它。例如:

function App() {
  return (
    <CountContextContainer>
      <SomeChildComponent/>
    </CountContextContainer>
  );
}

function SomeChildComponent() {
  const { state, dispatch } = useContext(CountContext);

  const increment = () => {
    dispatch({
      type: ActionType.INCREMENT,
      payload: 2
    });
  };

  const decrement = () => {
    dispatch({
      type: ActionType.DECREMENT,
      payload: 2
    });
  };

  return (
    <div className="App">
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

相关问题