类型 'never[]' 不能分配给类型 'never'。 TS2322 在使用 createContext Hook 传递给 ContextProvider 的值答案

【问题标题】：Type 'never[]' is not assignable to type 'never'. TS2322 in passing to the value of ContextProvider using createContext Hook类型 'never[]' 不能分配给类型 'never'。 TS2322 在使用 createContext Hook 传递给 ContextProvider 的值
【发布时间】：2021-08-08 11:15:33
【问题描述】：

我无法将 state 和 setState 分配给 ContextProvider 的 value 参数

代码：-

import React, { useState, createContext } from 'react';
import { makeStyles } from '@material-ui/core';
import ProductHeader from './components/productHeader';
import ProductTable from './components/productTable';

const styles = makeStyles((theme) => ({
    root: {
        height: '92.7%',
        position: 'fixed',
        width: '85%',
        bottom: '0',
        right: '0',
        border: `1px solid  ${theme.palette.success.light} `,
        overflow: 'hidden',
    },
}));
// use State + use Context

const ProductContext = createContext([]);

const ProductPortion: React.FC = () => {
    const classes = styles();
    const [products, setProducts] = React.useState([]);
    return (
        <div className={classes.root}>
            <ProductContext.Provider value={[setProducts, products]}>
                <ProductHeader />
                <ProductTable />
            </ProductContext.Provider>
        </div>
    );
};

export default ProductPortion;

确切的错误：-

TypeScript error in C:/Users/dell/Desktop/Web current Projects/bigosoft/bigosoft/POS-Retail-Frontend/Retail-POS-Frontend/src/components/Management/components/productPortion/index.tsx(26,46):
Type 'Dispatch<SetStateAction<never[]>>' is not assignable to type 'never'.  TS2322

    24 |     return (
    25 |         <div className={classes.root}>
  > 26 |             <ProductContext.Provider value={[setProducts, products]}>
       |                                              ^
    27 |                 <ProductHeader />
    28 |                 <ProductTable />
    29 |             </ProductContext.Provider>

我想使用 ContextProvider 将状态及其设置器传递给孩子，但我收到了 TypeScript 错误。

【问题讨论】：

标签： reactjs typescript react-hooks react-state-management createcontext

【解决方案1】：

我认为问题出在

const ProductContext = createContext([])

见下一个例子：

const foo=<T,>(arg:T)=>arg
foo([]) // never[]

但如果你提供显式类型，它会如你所愿地解决：

foo<number[]>([]) // number[]

在你的情况下，我相信你应该这样写：

const ProductContext = createContext<Products[]>([])

我假设你知道你的 Products 类型

【讨论】：