reactjs - 在 TypeScript 中使用上下文 API

Question

我是第一次使用 Typescript 创建上下文，但我很难让它工作。每次我尝试创建接口并将它们放在我的价值道具中时，我都会遇到错误，我真的需要一些帮助。这是我的上下文（我会在评论中指出错误）

在 IContext 中，我不知道如何放置事务的类型（它是一个对象数组）

我想传递 value prop、两个函数、事务数组和输入中的所有内容。

无论如何，这是我第一次在更大的项目中使用 typescript，所以如果你们对如何更好地练习它有任何建议，请告诉我。

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<ITransactions[]>' 类型的参数。类型“（ITransaction | ITransactions）[]”不可分配给类型“ITransactions[]”。输入'ITransaction | ITransactions 不可分配给类型“ITransactions”。“ITransaction”类型中缺少属性“transactionList”，但在“ITransactions”类型中是必需的。

标签： reactjstypescriptreact-context

Answer 1

你不需要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>
  )
}