如何在 TypeScript 中设置状态而不会出现赋值错误？答案

【问题标题】：How to set state in TypeScript without getting assignment error?如何在 TypeScript 中设置状态而不会出现赋值错误？
【发布时间】：2020-12-24 03:17:51
【问题描述】：

我正在用 React-TypeScript 编写一个简单的程序，允许用户向浏览器提交和呈现文本。

提交后，会生成一个新对象，该对象保存为document 的状态，然后将其传播到一个名为choreList 的新状态中，如下所示：

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>)=> {
    e.preventDefault()
    let doc = new ChoreDoc(name,chore,date)
    setDocument(doc)
    setChoreList([...choreList,document])
  }

我的问题是我收到以下与 [...choreList,document] 相关的 linting 错误：

Argument of type '(ChoreDoc | null)[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type '(ChoreDoc | null)[]' is not assignable to type 'never[]'.

关于如何键入提交函数以解决此问题的任何建议？

完整代码：

App.tsx

import React, {useState} from 'react';
import Document from './Document'
import './styles.css'

interface Formatter {
  format(): string
}

class ChoreDoc implements Formatter  {
  name:string
  chore:string
  date:string

  constructor(n:string,c:string,d:string){
    this.name = n
    this.chore = c
    this.date = d
  }

  format(){
    return `${this.name} completed this following chore: ${this.chore} (on date: ${this.date})`
  }
}

function App() {

  const [name, setName] = useState('')
  const [chore, setChore] = useState('')
  const [date, setDate] = useState('')
  const [document, setDocument] = useState<ChoreDoc | null>(null);
  const [choreList, setChoreList] = useState([])

  const handleNameChange = (e:React.FormEvent<HTMLInputElement>) => {
      e.preventDefault()
      setName(e.currentTarget.value)
  }
  const handleChoreChange = (e:React.FormEvent<HTMLInputElement>) => {
      e.preventDefault()
      setChore(e.currentTarget.value)
  }
  const handleDateChange = (e:React.FormEvent<HTMLInputElement>)=> {
      e.preventDefault()
      setDate(e.currentTarget.value)
  }


  const handleSubmit = (e: React.FormEvent<HTMLFormElement>)=> {
    e.preventDefault()
    let doc = new ChoreDoc(name,chore,date)
    setDocument(doc)
    setChoreList([...choreList,document])
  }


  return(
    <>
      <div>
          <form className = 'input-list' onSubmit = {handleSubmit} >
              <label>
              Enter Name <br></br>
              <input type = 'text' name = 'name' onChange = {handleNameChange}></input>
              </label>
              <label>
              Chore <br></br>
              <input type = 'text' name = 'chore' onChange = {handleChoreChange}></input>
              </label>
              <label>
              Date completed <br></br>
              <input type = 'text' name = 'date' onChange = {handleDateChange}></input>
              </label>
              <div>
              <button type = 'submit' >Submit</button>
              </div>
          </form>
      </div>
      <div>
      {document && <Document document={document}/>}
      </div>
      </>
  )
}

export default App;

Document.tsx

import React from 'react'

interface Formatter {
    format(): string
  }

interface Props {
    document: Formatter;
  }

const Document: React.FC<Props> = ({ document }) => {
    return <h1 className="doc">{document.format()}</h1>;
  };

export default Document

【问题讨论】：

标签： reactjs typescript react-typescript

【解决方案1】：

你需要

(1) 在声明时正确键入choreList useState，以便 TS 理解它是一个文档数组

(2) setDocument 不会更新当前范围内的 document，因此您将使用先前渲染中的文档而不是刚刚创建的文档调用 setChoreList

const [choreList, setChoreList] = useState<Array<ChoreDoc>>([])

和

setChoreList([...choreList,doc])

【讨论】：