TypeScript 將 useState 鈎子類型聲明為 prop

Question

我正在嘗試向孩子發送道具，其中一個道具是useState本身。 如果我將類型聲明為Function ，我會收到一個關於需要更具體的錯誤，如果我使用 void，我會得到Expected 0 arguments, but got 1.

如何聲明setState掛鈎的類型？

應用程序.tsx

import React, { useState } form 'react'
import Component from './component'

const App = () => {
 
  const [foo, setFoo] = useState>string>('')
 
  return (
    <Component 
      foo={foo}
      setFoo={setFoo}
    />
  )

}

組件.tsx

import React, { FC } from 'react'

type Props  = {
  thing: string,
  setFoo: () => void // This fails I do not know how to declare the type for this, it takes a string
}

const Component: FC<Props> = ({ foo, setFoo}) => (
   <>
     <input onChange={e => setFoo(e.target.value} />
   </>
)

export default Component

Answer 1

setFoo使用字符串調用，如setFoo("foo") 。 所以類型是(_: string) => void 。 （ _只是一個占位符變量名，您還可以使用更詳細的名稱，例如(foo: string) => void — 沒關系。）

useState 掛鈎還允許功能更新。 這是在基於之前的 state 計算新的 state 時避免問題的一種方法。 要使用它，您將function傳遞給接收舊值並返回新值的設置器： setFoo((oldFoo) => oldFoo + "bar")

如果您希望您的組件也能夠使用功能更新，則需要將其包含在類型中： (_: string | (oldValue: string) => string) => void 。