設置對象的 useState 數組的類型

Question

我正在努力弄清楚我的代碼有什么問題。

interface history { 
  data: string, 
  przed: string | number, 
  po: string | number,
}

我在功能組件之外有一個接口，然后在內部定義它的外觀 - 沒問題

const [history, setHistory] = useState<[history]>([{
    data: '',
    przed: '',
    po: '',
}]);

然后我有一個 onClick function 這樣做：

    setHistory([ ... history , {
      data: new Date().toISOString().slice(0, 10), // date
      przed: fromTo, // number
      po: valueToSave, // number
    }]);

在瀏覽器中編譯和測試時一切正常，但是 VS Code 根本不喜歡我的代碼並出現此錯誤：

Argument of type '[history, { data: string; przed: number; po: string; }]' is not assignable to parameter of type 'SetStateAction<[history]>'.
  Type '[history, { data: string; przed: number; po: string; }]' is not assignable to type '(prevState: [history]) => [history]'.
    Type '[history, { data: string; przed: number; po: string; }]' provides no match for the signature '(prevState: [history]): [history]'.ts(2345)

我該如何處理這樣的事情？ 這是什么意思？

Answer 1

您可以使用history[]或Array<history>而不是[history]​​這意味着您需要一個history類型的數組或一個數組，其中每個元素的類型都是history 。

[history]​​表示它有一個數組，其中包含一個history類型的元素

history[]意味着你它是一個history類型數組

const [history, setHistory] = useState<history[]>([
    {
      data: "",
      przed: "",
      po: ""
    }
  ]);

或者你也可以這樣做：

  const [history, setHistory] = useState<Array<history>>([
    {
      data: "",
      przed: "",
      po: ""
    }
  ]);