useReducer 和 userContext Typescript 未按预期工作

Question

这是我第一次将 useReducer 和 useContext 与 Typescript 一起使用，我正在创建一个简单的计数器。我正在尝试使用递增和递减调度来更新 count，但它没有改变，终端也没有错误。

这是 codesandbox 的 link： codesandbox

谢谢

Answer 1

使用上下文时，Provider 需要在组件树上比消费者更上层。您代码中最顶层的组件是 App，它会立即尝试执行 useContext(CountContext)。但是由于上面没有provider，App只是获取了context的默认值，也就是说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>
  );
}

useReducer 和 userContext Typescript 未按预期工作

useReducer and userContext Typescript not working as intended

reactjs

typescript

use-context

use-reducer