reactjs - 如何在提供者(React、Typescript、Context)的值中传递数组和 setArray

Question

如何在提供者的值中传递数组和 setArray？我的主要问题是如何为此创建接口(interface)，因为它说类型不正确。

Array 包含对象 List，我需要查询此 Array 并设置为稍后使用过滤器。

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>
  )
}

Answer 1

你需要为 React.createContext 创建一个不同的接口(interface)

例如:

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

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

然后，

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