reactjs 使用useState时，类型的参数不能分配给类型的参数

dced5bon 于 2023-04-05 发布在 React

关注(0)|答案(2)|浏览(212)

使用useState Argument of type '(previousState: IsProducts) => { list: IsProduct[]; }' is not assignable to parameter of type 'IsProducts'.时出现以下TypeScript错误
我不太确定类型的问题是什么。如果有人能给我指出正确的方向，我将不胜感激：）

export interface IsProduct {
    name: string;
    price: number;
    quantity: number;
}

export interface IsProducts {
    list: IsProduct[];
}

const [products, setProducts] = useState<IsProducts | undefined>({
        list: [
            {
                name: 'Test One',
                price: 20,
                quantity: 2,
            },
            {
                name: 'Test Two',
                price: 10,
                quantity: 1,
            },
        ],
    });

setProducts((previousState: IsProducts) => {
                return {
                    ...previousState,
                    list: previousState.list.map((product: IsProduct, idx: number) => {
                        if (idx === index) {
                            return {
                                ...product,
                                quantity: product.quantity >= 10 ? (product.quantity = 10) : product.quantity + 1,
                            };
                        }
                        return product;
                    }),
                };
            });

从IsProductContext中删除setProducts会删除上述错误，但会在上下文中引发不同的错误。

export interface IsProductContext {
    products: IsProducts;
    setProducts: (products: IsProducts) => void;
}

reactjs

来源：https://stackoverflow.com/questions/75920284/argument-of-type-is-not-assignable-to-parameter-of-type-when-using-usestate

2条答案

按热度按时间

dvtswwa31#

调用useState时，使用IsProducts对其进行了参数化|undefined，然后当你调用setProducts时，你有previousState：IsProducts。您的类型不匹配。

赞(0）回复(0）举报 2023-04-05

w8biq8rn2#

展开注解。使用useState创建setProducts：

const [products, setProducts] = useState<IsProducts | undefined>(...);

在这一点上，setProducts有这个有点不透明和无用的类型：

React.Dispatch<React.SetStateAction<IsProducts | undefined>>

检查React类型，你可以确认这些是更熟悉的结构的别名：

type Dispatch<A> = (value: A) => void;

type SetStateAction<S> = ((prevState: S) => S) | S;

毫无疑问，我们可以使用IsProducts | undefined值或返回IsProducts | undefined值的函数来调用setProducts(..)。
您的上下文类型为：

export interface IsProductContext {
    products: IsProducts;
    setProducts: (products: IsProducts) => void;
}

上下文中的setProducts与useState返回的setProducts具有不同的类型-context.setProducts只声明它接受IsProducts值，而不是回调形式。当您为它提供回调值时，Typescript正确地报告错误。
如果你更新了上下文类型，以匹配useState返回的setter的React类型…

export interface IsProductContext {
    products: IsProducts;
    setProducts: React.Dispatch<React.SetStateAction<IsProducts | undefined>>;
}

那你就没事了
顺便说一下，在我的项目中，我通常会为这些类型的状态更新函数设置几个别名，以便将它们与React解耦。

type StateSetter<T> = (update: StateUpdate<T>) => void;
type StateUpdate<T> = T | ((prevT: T) => T);

在这种情况下，您上下文中将有setProducts: StateSetter<IsProducts | undefined>。

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs 使用useState时，类型的参数不能分配给类型的参数

2条答案

相关问题

热门标签

最新问答