javascript 阐明带useState的Typescript的工作原理

zazmityj 于 2022-12-10 发布在 Java

关注(0)|答案(2)|浏览(127)

你好，我还在学习Typescript，我正在尝试摆脱所有的任何类型。无论我做什么，我总是得到这个错误。我的应用程序工作正常，但我知道使用任何不好，所以我试图清理它一点。如果你能给我指出正确的方向，这将是有帮助的。或解释我做错了什么。谢谢

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 }) => {}

JavaScript

来源：https://stackoverflow.com/questions/74741900/clarification-of-how-typescript-with-usestate-works

2条答案

按热度按时间

bcs8qyzn1#

问题似乎出在fetchData函数中的setData参数类型。您当前将其定义为React.Dispatch<string[]>，但它应该是React.Dispatch<SetStateAction<string[]>>。
因此可以按如下方式指定类型：
React.Dispatch<SetStateAction<string[]>>然后，在fetchData函数的主体中，您可以像通常使用setState一样使用setData，并且类型将被正确插入。
如果你只是想抄我写的所有：

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();
};

然后，在App组件中，可以将userData状态变量的类型指定为string[]。

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

并且可以更新Profile组件中的内容 prop 的类型以匹配userData状态变量的类型。

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

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

赞(0）回复(0）举报 2022-12-10

cbjzeqam2#

对于您的错误，只需将React.Dispatch<string[]>更改为Dispatch<SetStateAction<[] | undefined>>
由于状态不是直接定义的，所以Typescript必须知道它可能是未定义的。

赞(0）回复(0）举报 2022-12-10