做这个项目是为了帮助自己学习Redux和Typescript,所以仍然在学习曲线上。
根据我在一本书中读到的内容,我有一个“切片”设置,其中包含reducer的定义:
const iState: { value: Book[], formShown: boolean } = { value: [], formShown : false };
export const cartSlice = createSlice({
name : 'cart',
initialState : iState,
reducers : {
addBookToCart : (state, action) => {
state.value.push(action.payload);
},
showForm: (state, action) => {
state.formShown = true;
}
}
});
第一个reducer(addBookToCart)工作正常,但第二个就不行了,它根本不需要任何参数;它只是设置了一个布尔值开关。但是无论我尝试输入什么,我都会得到一个错误。
下面是相关代码:
const showForm = (e : React.MouseEvent<HTMLElement>) => {
e.preventDefault();
dispatch(showForm(true));
};
if (itemList.length) {
return (
<>
<ul>
{itemList}
</ul>
<p><b>Total Price: ${totalPrice.toFixed(2)}</b></p>
<br />
{
formShown ? <PaymentForm />
: <Button variant="success" onClick={showForm}>Checkout</Button>
}
</>
);
}
else {
return (<p><b>Your Shopping Cart is Empty</b></p>);
}
这是我得到的错误(代码在IDE中编译时立即出现):
ERROR in src/Cart.tsx:64:18
TS2769: No overload matches this call.
Overload 1 of 3, '(thunkAction: ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>): unknown', gave the following error.
Argument of type 'void' is not assignable to parameter of type 'ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>'.
Overload 2 of 3, '(action: AnyAction): AnyAction', gave the following error.
Argument of type 'void' is not assignable to parameter of type 'AnyAction'.
Overload 3 of 3, '(action: AnyAction | ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>): unknown', gave the following error.
Argument of type 'void' is not assignable to parameter of type 'AnyAction | ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>'.
62 | const showForm = (e : React.MouseEvent<HTMLElement>) => {
63 | e.preventDefault();
> 64 | dispatch(showForm(true));
| ^^^^^^^^^^^^^^
65 | };
66 |
67 | if (itemList.length) {
1条答案
按热度按时间6fe3ivhb1#
showForm既是事件处理回调函数的名称,也是动作的名称。切片的语法颜色可能表明showForm动作从未导出(因此从未导入到使用它的组件中)。
showFormaction可以不带参数调用,
action
参数可以从showForm
reducer中移除,所以showForm
可以更新如下: