设置对象的 useState 数组的类型

Question

I'm struggling to figure out what the problem is with my code.

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

I have an interface outside of the Functional Component then inside I define how it's supposed to look like - no problem

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

then I have a onClick function which does this:

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

Everything works fine when compiled and tested in the browser, however VS Code is not liking my code at all with this error:

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)

How can I handle something like this? What does it mean?

Answer 1

You can use either history[] or Array<history> instead of [history] which means you want an array of history type or an array in which each elements will be of type history .

[history] means that it has an array that will contain an element of type history

history[] means you it is an array of type history

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

or you can also do as:

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