时间戳

首页 > 解决方案 > 搜索过滤器在自定义对象的本机打字稿中完成后无法分配数据

typescript - 搜索过滤器在自定义对象的本机打字稿中完成后无法分配数据

问题描述

我有一个自定义对象，一个数组并在其中存储 api 响应，并将该数据显示到 UI 中以供平面列表使用。

export type userInfo = {
  id: string,
  title: string,
  email: string,
  userAccount: number
};

export type userData = {
  page: number,
  pageSize: number,
  userInformation: userInfo[]
}

export const User: FunctionComponent = () => {

       const [search, setSearch] = useState('');
      const [userInfo, setUserInfo] = useState<userInfo>();
  
      const [arrayholder, setArrayholder] =useState<userInfo>();

      useEffect(() => {
          setUserInfo(someState.userInfo);
          setArrayholder(someState.userInfo);
      }, [someState]);

searchData= (text: any)=>  {
            const newData = arrayholder?.userData.filter(item => {
                const itemData = item.title.toUpperCase();
                const textData = text.toUpperCase();
                return itemData.indexOf(textData) > -1
              });
              console.log("newData is", newData) //here throwing error
              setUserInfo(newData)
                setSearch(text)    
              }

}

          return (

//here showing searchbar
//here showing flatlist showing with userInfo

)

尝试为 userInfo 设置新数据时，它显示以下错误并且无法在平面列表中显示搜索数据。

  Type 'userInfo[]' provides no match for the signature '(prevState: userInfo | undefined): userData | undefined'.ts(2345)

有什么建议么？

我是打字稿语言的新手。

标签： typescriptreact-nativereact-native-flatlistsearchbarflatlist

解决方案

filter返回一个数组：

arrayholder?.activities.filter

这就是为什么 userInfo 需要一个数组类型参数。

const [userInfo, setUserInfo] = useState<userInfo[]>();

推荐阅读