反应 Typescript 使用状态

Question

I'm trying to create a custom hook that accepts a non-mandatory date as a prop, I need to call this hook with a different date or without it, and if there is a date, I should return exactly the type of this date, for example f(string) => string[]. I'm sorry, I can't show you the real code, but I created an equivalent code.

import { useStatem, useEffect } from "react";

type IProps<T> = {
  isValid: boolean;
  testData?: T[];
};
interface IState<T> {
  error: boolean;
  loading: boolean;
  data: T[];
}
type InitialTypes = "john" | 55;

export function useSome<T extends InitialTypes>({
  testData,
  isValid,
}: IProps<T>) {
  const [value, setValue] = useState<IState<T>>({
    error: false,
    loading: false,
    data: [],
  });
  useEffect(() => {
    // some logic
    setValue((prevState) => ({ ...prevState, data: ["john"] }));
  }, []);

  return [value.data];
}

when I try to setValue I get error:

TS2345: Argument of type '(prevState: IState<T>) => { data: "john"[]; error: boolean; loading: boolean; }' is not assignable to parameter of type 'SetStateAction<IState<T>>'.   
Type '(prevState: IState<T>) => { data: "john"[]; error: boolean; loading: boolean; }' is not assignable to type '(prevState: IState<T>) => IState<T>'.     
Call signature return types '{ data: "john"[]; error: boolean; loading: boolean; }' and 'IState<T>' are incompatible.       
The types of 'data' are incompatible between these types.         
Type '"john"[]' is not assignable to type 'T[]'.           
Type '"john"' is not assignable to type 'T'.             
'"john"' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'InitialTypes'.

Thanks a lot.

Answer 1

As per your code, the issue is caused by const [value, setValue] = useState<IState<T>>({error: false, loading: false, data: []}); line.

In your IState type you have a generic T which is used to determine the type of array hold by data variable as follow:

interface IState<T> {
    error: boolean,
    loading: boolean,
    data: T[],
}

Whereas, in const [value, setValue] = useState<IState<T>>({error: false, loading: false, data: []}); , you have forgot to specify/provide the generic type T.

So, instead of useState<IState<T>> it should be either useState<IState<string>> or useState<IState<InitialTypes>>