Использование Context API в TypeScript - PullRequest
Новая
       70

Использование Context API в TypeScript

2 голосов
/ 11 июля 2020

Я впервые создаю контекст, используя Typescript, и мне трудно заставить его работать. Каждый раз, когда я пытаюсь создавать интерфейсы и помещать их в свой value prop, я получаю ошибки, и мне действительно нужна помощь. Вот мой контекст (на ошибки укажу в комментариях)

В IContext я не знаю, как мне указать тип транзакций (это массив объектов)

Я хотел бы передать все в опоре значения, двух функциях, массиве транзакций и входах. советы о том, как лучше практиковаться, просто дайте мне знать. 

import React, { createContext, useState, ChangeEvent } from 'react';

interface IContext {
  handleInputChange(): void;  
  handleSubmit(): void;
  inputElements: {
    name: string;
    amount: string;
  };
  transactions: <-- I don't know what to put here
}

export const TransactionsContext = createContext<IContext | null>(null)


interface ITransaction {
  name: string;
  amount: string;
}

interface ITransactions {
  transactionList: ITransaction
}


export const TransactionsContextProvider: React.FC = ({ children }) => {
  
  const [transactions, setTransactions] = useState<ITransactions[]>([])
  const [inputs, setInputs] = useState<ITransaction>({
    name: '',
    amount: ''
  })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    setInputs({...inputs, [name]: value })
  }


  const handleSubmit = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    setTransactions([...transactions, inputs])  <-- Error here
  }

  return (
    <TransactionsContext.Provider 
      value={{ transactions, handleInputChange, handleSubmit, inputs }}> <-- Error here
        {children}
    </TransactionsContext.Provider>
  )
}

Ошибка

В setTransactions:

Аргумент типа '(ITransaction | ITransactions) [] 'не назначается параметру типа' SetStateAction '. Тип '(ITransaction | ITransactions) []' не может быть назначен типу 'ITransactions []'. Тип "ITransaction | ITransactions 'нельзя присвоить типу ITransactions. Свойство "transactionList" отсутствует в типе "ITransaction", но является обязательным для типа "ITransactions".

1 Ответ

1 голос
/ 11 июля 2020

Вам не нужно interface ITransactions.

используйте ITransaction[] как тип для transactions

const [transactions, setTransactions] = useState<ITransaction[]>([])

import React, { createContext, useState, ChangeEvent } from 'react';

interface ITransaction {
  name: string;
  amount: string;
}

interface IContext {
  handleInputChange(e: ChangeEvent<HTMLInputElement>): void;  
  handleSubmit(e: ChangeEvent<HTMLInputElement>): void;
  inputElements: {
    name: string;
    amount: string;
  };
  transactions: ITransaction[];
}

export const TransactionsContext = createContext<IContext | null>(null)

export const TransactionsContextProvider: React.FC = ({ children }) => {
  
  const [transactions, setTransactions] = useState<ITransaction[]>([])
  const [inputs, setInputs] = useState<ITransaction>({
    name: '',
    amount: ''
  })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    setInputs({...inputs, [name]: value })
  }


  const handleSubmit = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    setTransactions([...transactions, inputs]);
  }

  return (
    <TransactionsContext.Provider 
      value={{ transactions, handleInputChange, handleSubmit, inputs }}>
        {children}
    </TransactionsContext.Provider>
  )
}
...