在 Reactjs 中使用 Typescript答案

【问题标题】：Using Typescript in Reactjs在 Reactjs 中使用 Typescript
【发布时间】：2020-07-10 15:43:33
【问题描述】：

我正在尝试使用 TypeScript 在 React 项目中创建上下文。这是我第一次使用 TypeScript，我遇到了一个错误。我试图创建一些接口来解决这个问题，但我找不到解决这个问题的方法。

这是我的上下文文件：

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'.

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

您的 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}])

【讨论】：