Использование машинописного текста в Reactjs - PullRequest
Новая
       57

Использование машинописного текста в Reactjs

0 голосов
/ 10 июля 2020

Я пытаюсь создать контекст в проекте React, используя TypeScript. Я впервые использую TypeScript, и я получаю сообщение об ошибке. Я попытался создать несколько интерфейсов для решения проблемы, но не смог найти способ go обойти это.

Вот мой файл контекста: 

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

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

interface ITransactions {
  transactionsList: ITransaction[]
}

export const TransactionsContext = createContext({})

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}>
        {children}
    </TransactionsContext.Provider>
  )
}

Ошибка, Я получаю 

Argument of type '(ITransaction | ITransactions)[]' is not assignable to parameter of type 'SetStateAction<ITransactions[]>'.
  Type '(ITransaction | ITransactions)[]' is not assignable to type 'ITransactions[]'.
    Type 'ITransaction | ITransactions' is not assignable to type 'ITransactions'.
      Property 'transactionsList' is missing in type 'ITransaction' but required in type 'ITransactions'.

1 Ответ

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

Ваш transactions имеет тип ITransactions[], что означает, что он ожидает значение в этой форме: 

[
{transactionsList:{name:'',amount:''}},
{transactionsList:{name:'',amount:''}},
{transactionsList:{name:'',amount:''}}
]

Теперь здесь setTransactions([...transactions, inputs]) <-- Error here, когда вы обновляете состояние, вы пытаетесь поместить только объект {name:'',amount:''} в массиве, но не {transactionsList:{name:'',amount:''}, и, следовательно, ошибка.

Попробуйте следующее: 

setTransactions([...transactions,{transactionsList:inputs}])
...