Clarification of how Typescript with useState works-CodePudding

Hi I'm still learning Typescript and I'm trying to get rid of all my any types. No matter what I do I always get this error. My app works fine but I know using any isn't good so I'm trying to clean it up a bit. If you can point me in the right direction that would be helpful. Or an explanation of what I'm doing wrong. Thank you

Argument of type 'Dispatch<SetStateAction<[] | undefined>>' is not assignable to parameter of type 'Dispatch<string[]>'.
  Type 'string[]' is not assignable to type 'SetStateAction<[] | undefined>'.
    Type 'string[]' is not assignable to type '[]'.
      Target allows only 0 element(s) but source may have more.

App.tsx

const [userData, setUserData] = useState<any>();
fetchData('user', setUserData);

return
<Profile content={userData} />

Firebase.tsx

export const fetchData = async (storage: string, setData: React.Dispatch<string[]>) => {
  const q = query(collection(db, storage));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    let array: string[] = [];
    querySnapshot.forEach((doc: any) => {
      array.push({ ...doc.data(), id: doc.id });
    });
    setData(array);
  });
  return () => unsubscribe();
};

Profile.tsx

type Props = {
  content?: {
    firstName: string;
    lastName: string;
  }[];
  location?: string;
  image?: string;
};

const Profile: React.FC<Props> = ({ content, image }) => {}

CodePudding user response：

It looks like the issue is with the type of the setData parameter in the fetchData function. You're currently defining it as React.Dispatch<string[]> but it should be React.Dispatch<SetStateAction<string[]>>.

so you can specify the type like this:

React.Dispatch<SetStateAction<string[]>> Then, in the body of the fetchData function, you can use setData as you would normally use setState, and the type will be inserted correctly.

In case you just wanna copy i wrote all of it:

import { Dispatch, SetStateAction } from 'react';

export const fetchData = async (storage: string, setData: Dispatch<SetStateAction<string[]>>) => {
  const q = query(collection(db, storage));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    let array: string[] = [];
    querySnapshot.forEach((doc: any) => {
      array.push({ ...doc.data(), id: doc.id });
    });
    setData(array);
  });
  return () => unsubscribe();
};

Then, in the App component, you can specify the type of the userData state variable as string[].

const [userData, setUserData] = useState<string[]>();

And the type of the content prop in the Profile component can be updated to match the type of the userData state variable.

type Props = {
  content?: string[];
  location?: string;
  image?: string;
};

const Profile: React.FC<Props> = ({ content, image }) => {
  //the rest of the cdoe
}

CodePudding user response：

For your error, just change React.Dispatch<string[]> by Dispatch<SetStateAction<[] | undefined>>

As the state is not defined directly, Typescript must know that it can possibly be undefined.