Reactjs 如何在provider（React、Typescript、Context）的值中传递数组和setArray

如何在provider的值中传递数组和setArray？ 我的主要问题是如何为此创建一个接口，因为它显示的类型不正确

数组包含对象列表，我需要查阅此数组并设置为稍后使用过滤器

import React from "react";

interface Lista {
  nome: string,
  empresa: string,
  ramal: number
}

const listaInicial: Lista = {
  nome: "",
  empresa: "",
  ramal: 0
}

interface Props {
  children: React.ReactNode
}

const ListaContext = React.createContext<Lista>(listaInicial);

export default function ListaProvider({children}: Props) {
  const [lista, setLista] = React.useState<Lista[]>([]);

  React.useEffect(() => {
    setLista([
      {
        nome: "nome 1",
        empresa: "matriz",
        ramal: 2000
      },
      {
        nome: "nome 2",
        empresa: "matriz",
        ramal: 2001
      },
      {
        nome: "nome 3",
        empresa: "sede",
        ramal: 2002
      },
      {
        nome: "nome 4",
        empresa: "sede",
        ramal: 2002
      },
    ])
  }, []);

  return (
    <ListaContext.Provider value={{lista, setLista}}>
      {children}
    </ListaContext.Provider>
  )
}

从“React”导入React；
接口列表a{
诺姆：弦，
empresa:字符串，
拉马尔：号码
}
常量listaInicial:Lista={
名称：“，
empresa:“，
拉马尔：0
}
界面道具{
子项：React.ReactNode
}
const ListaContext=React.createContext（listaInicial）；
导出默认函数ListaProvider（{children}:Props）{
const[lista，setLista]=React.useState（[]）；
React.useffect（（）=>{
塞利斯塔([
{
诺姆：“诺姆1号”，
empresa：“matriz”，
拉马尔：2000年
},
{
诺姆：“诺姆2号”，
empresa：“matriz”，
拉马尔：2001年
},
{
诺姆：“诺姆3号”，
empresa：“sede”，
拉马尔：2002年
},
{
诺姆：“诺姆4号”，
empresa：“sede”，
拉马尔：2002年
},
])
}, []);
返回(
{儿童}
)
}

您需要为React.createContext创建一个不同的接口

例如：

    interface ListaContextValue {
     lista:Lista[],
     setLista:(data:Lista[]) => void
    }

    const listaInicial: ListaContextValue = {
      lista:[
       {nome: "",
        empresa: "",
        ramal: 0
       }],
      setLista: (data) => {}
    }

然后呢,

const ListaContext = React.createContext<ListaContextValue>(listaInicial);

const ListaContext=React.createContext（listaInicial）；

React.createContext（listaInicial）

表示

ListaContext的返回值。提供程序

为

Lista

类型。 如果要设置provide的值为

lista

和

setLista

，可以尝试不定义

createContext

的类型

const ListaContext = React.createContext(listaInicial);

或

const ListaContext=React.createContext（listaInicial）；

const ListaContext = React.createContext<{lista: Lista[], setLista:React.Dispatch<React.SetStateAction<Lista[]>> }>(listaInicial);