如何在提供者的值中传递数组和 setArray（React、Typescript、Context）

Posted 2023-04-14

【中文标题】如何在提供者的值中传递数组和 setArray（React、Typescript、Context）

【英文标题】：How pass a array and setArray in value of provider (React, Typescript, Context)

【发布时间】：2020-09-29 22:00:48

【问题描述】：

如何在提供者的值中传递数组和 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>
  )

【参考方案1】：

你需要为 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);

【参考方案2】：

React.createContext<Lista>(listaInicial);表示ListaContext.Provider的返回值为Lista类型。 如果你想设置提供的值是lista 和setLista 你可以试试这个不定义createContext 的类型。

const ListaContext = React.createContext(listaInicial);

或者

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