reactjs 我无法让ReactContext与Typescript一起工作,这可能是我不理解的基本Typescript概念

jckbn6z7  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(86)

我试图用typescript在上下文中设置状态。但是,Typescript给了我一个错误,即Todo []不能赋值给类型never。
下面是我的代码:

type Props = {
  children: any;
};

interface Todo {
  id: number;
  name: string;
}

function TodoContext({ children }: Props) {
  const [todos, setTodos] = useState<Todo[]>([]);

  return (
    <>
      <FilterContext.Provider value={[todos, setTodos]}>
        {children}
      </FilterContext.Provider>
    </>
  );
}

是value {}属性中的todos给了我错误。
知道我做错了什么吗?
谢谢大家!
我不确定我是否正确设置了状态。不明白为什么value ={}部分给我一个错误。

e5nqia27

e5nqia271#

export const TodoContext = createContext([]);

因为你没有指定值的类型,typescript会尝试从你调用createContext的方式来推断它。它看到你传入了一个数组,但是没有办法知道这个数组应该包含什么,所以它假设never[]。相反,你需要一个元组,其中第一个元素是todos数组,第二个元素是setter函数。这可以像这样做:

import { Dispatch, SetStateAction } from 'react';

type ContextValue = [
  Todo[],
  Dispatch<SetStateAction<Todo[]>>
]

export const TodoContext = createContext<ContextValue>([[], () => {}]);

相关问题