使用useState+TypeScript更新状态时出错

Question

有一个用对象数组初始化的状态：

interface Product {
id: number;
status: boolean;
color: string;
price: number;
}
const productList: Product[] = [
{
id: 1,
status: true,
color: 'yellow',
price: 275
},
{
id: 2,
status: true,
color: 'blue',
price: 325
}
];
const [products, setProducts] = useState<Product[]>(productList);

仅显示属性状态为==true的那些产品。我正试图删除一个产品，所以我使用以前的状态来计算新状态：

const productsRender = products.map((product: Product): false | JSX.Element => {
return(product.status &&
<ProductWrapper>
<Product key={product.id}>
<Remove
type='button'
onClick={(): void =>
//TypeScript error TS2345
setProducts(prevProducts => [...prevProducts, product.status = false])
}
/>
<Color>color: {product.color}</Color>
<Price>${product.price}</Price>
</Product>
</ProductWrapper>
);
});

但我得到了一个错误：

Argument of type '(prevProducts: Product[]) => (boolean | Product)[]' is not assignable to parameter of type 'SetStateAction<Product[]>'.
Type '(prevProducts: Product[]) => (boolean | Product)[]' is not assignable to type '(prevState: Product[]) => Product[]'.
Type '(boolean | Product)[]' is not assignable to type 'Product[]'.
Type 'boolean | Product' is not assignable to type 'Product'.
Type 'boolean' is not assignable to type 'Product'.

我尝试过不传递setProducts:中的函数

setProducts([...products, product.status = false])

但我得到TypeScript错误TS2322:

Type 'boolean | Product' is not assignable to type 'Product'.
Type 'boolean' is not assignable to type 'Product'.

我不清楚如何正确更新状态。如果能得到帮助，我将不胜感激。

Answer 1

使用...products时，您指的是阵列中以前的产品，并试图将product.status = false附加到阵列中，这是而不是Product。

如果要更新products数组的最后一个值，可以执行此操作。

const productsRender = products.map((product: Product): false | JSX.Element => {
return(product.status &&
<ProductWrapper>
<Product key={product.id}>
<Remove
type='button'
onClick={(): void => {
let new_products = [...products];
let atIndex = products.indexOf(product);
new_products[atIndex].status = false;
setProducts(new_products);
// This might work - haven't tested
//let atIndex = products.indexOf(product);
//products[atIndex].status = false;
//setProducts(products);
}}
/>
<Color>color: {product.color}</Color>
<Price>${product.price}</Price>
</Product>
</ProductWrapper>
);
});

也许还有另一种方式(更漂亮(。