在子組件中輸入 useState setter

Question

我正在嘗試將useState設置器傳遞給子組件，但不確定如何輸入。

const Parent = () => {
   const [count, setCount] = useState(0);
   return(
     Child count={count} setCount={setCount} />
   );
}

然后在Child組件中，我嘗試輸入設置器，但我看到以下錯誤。

類型 'Dispatch< SetStateAction< string[] > >' 不可分配給類型 '() => void'。

我的代碼看起來像這樣

type Props = {
  count: number;
  // the issue is the line below
  setCount: () => void;
}

const Child = ({ count, setCount }: Props) => {
    .... code here
}

Answer 1

您可以指定setCount prop 函數需要一個數字作為第一個參數，錯誤就會消失。

type Props = {
  count: number;
  setCount: (num: number) => void;
}

Answer 2

const Parent = () => {
   const [myState, setMyState] = useState<YourType>({});
   return(
     Child myState={myState} setMyState={setMyState} />
   );
}

import { Dispatch, SetStateAction } from 'react'

type Props = {
  count: AnyType;
  setCount: Dispatch<SetStateAction<YourType>>;
}

const Child = ({ myState, setMyState }: Props) => {
  // works with
  setMyState(newState)

  // also with
  setMyState(oldState => {
    // ...
    return newState
  })
}