React.js useReducer钩子-没有重载匹配这个调用

Question

我有一个这样的计数器:

import { useReducer } from 'react';
type CounterState = {
count: number;
};
type UpdateAction = {
type: 'increment' | 'decrement';
payload: number;
};
type ResetAction = {
type: 'reset';
};
type CounterAction = UpdateAction | ResetAction;
const initialState = { counter: 0 };
function reducer(state: CounterState, action: CounterAction) {
switch (action.type) {
case 'increment':
return { count: state.count + action.payload };      
case 'decrement':
return { count: state.count - action.payload };
case 'reset':
return initialState;
default:
return state;
}
}
export const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return(
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment', payload: 10 })}>
Increment 10
</button>
<button onClick={() => dispatch({ type: 'decrement', payload: 10 })}>
Decrement 10
</button>
<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
</>
);
}

如果我将鼠标悬停在useReducer(reducer, initialState)上，它会显示:

"没有重载匹配这个调用。

重载1的5，'(reducer: ReducerWithoutAction, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]'，给出了以下错误。类型'(state: CounterState, action: CounterAction) =>{counter: number;} | CounterState'不能赋值给'ReducerWithoutAction'类型的参数。5， '(reducer: (state: CounterState, action: CounterAction) =>{counter: number;} | CounterState, initialState: never, initializer?:未定义):[…]，给出以下错误。

类型为'{counter: number;}'不能赋值给'never'"类型的参数

另外，悬停在dispatch({ type: 'increment', payload: 10 })上，它说:

Expected 0 arguments, but got 1.

这是什么原因?我认为传递的参数是正确的。

Answer 1

您只需要从counter重命名您的初始状态到数:

const initialState = { count: 0 };