Pass useState型

Question

我有这样一个简单的应用程序

import React, { useState } from 'react'
import AddToList from './components/AddToList'
import List from './components/List'

export interface IProps{
  name: string
  age: number
  url: string
  note: string
}

const App = () => {

  const[people, setPeople] = useState([{
    name: 'chris',
    url: '',
    age: 21,
    note: 'note note'
  }])

  return (
    <div>
      <h2>People Invited</h2>
      <List people={people}/>
      <AddToList people setPeople/>
    </div>
  )
}

export default App

只是一个简单的useState，有一个对象和一个接口。

我有一个List组件来显示人中的对象。

我希望在AddToList中有一个表单来添加到人中。

我要把people和setPeople传给AddToList

import React from 'react'
import {IProps as Props} from '../App'

interface IProps{
    people: Props[]
    setPeople:any
}

const AddToList:React.FC<IProps> = ({people, setPeople}) => {
  return (
    <div>AddToList</div>
  )
}

export default AddToList    

在应用程序<AddToList people setPeople/>中，这里的人员是错误的，这是因为AddToList中的人员类型

interface IProps{
    people: Props[]
    setPeople:any
}

这里的类型应该是什么people: Props[]

Answer 1

<MyComponent foo />

其实只是以下几个词的缩写：

<MyComponent foo={true} />

这并不意味着：

<MyComponent foo={foo} />

如果你想通过这些道具，你要么需要：

<AddToList people={people} setPeople={setPeople} /> 

或者你可以把它们作为一个物体来传播：

<AddToList {...{ people, setPeople }} />

另外，react状态设置函数的正确类型是：

Dispatch<SetStateAction<T>>

其中T是您状态的类型。在这种情况下，将是：

interface IProps{
    people: Props[]
    setPeople: Dispatch<SetStateAction<Props[]>>
}

Answer 2

我把台词从

<AddToList people setPeople/>

至

<AddToList people={people} setPeople={setPeople}/>和它为我工作。为我抛出的错误类型是类型"boolean“不能分配到输入Props[]。因此，当我做了这样的分配，它是有效的，但它可能会有所不同，根据您的打字稿版本。