我正在學習在反應中實作打字稿，并且我正在努力嘗試在背景關系中實作幾個異步函式。
我得到的錯誤如下：
Argument of type '{ userData: null; favoriteCocktails: never[]; publishedRecipes: never[]; fetchUserData: (user: any) => PromiseConstructor; fetchFavoriteCocktails: (userData: UserData | null) => PromiseConstructor; fetchPublishedRecipes: (user: any) => PromiseConstructor; }' is not assignable to parameter of type 'ProfileContext'.
The types returned by 'fetchUserData(...)' are incompatible between these types.
Type 'PromiseConstructor' is missing the following properties from type 'Promise<void>': then, catch, finally, [Symbol.toStringTag]ts(2345)
這是我的背景：
import { createContext } from 'react'
import {UserData , Cocktail} from '../types'
interface ProfileContext {
userData: UserData | null,
favoriteCocktails: Array<Cocktail>,
publishedRecipes: Array<Cocktail>,
fetchUserData: (user: any) => Promise<void>,
fetchFavoriteCocktails: (userData: UserData | null) => Promise<void>,
fetchPublishedRecipes: (user: any) => Promise<void>,
}
const defaultState = {
userData: null,
favoriteCocktails: [],
publishedRecipes: [],
fetchUserData: (user: any) => Promise,
fetchFavoriteCocktails: (userData: UserData | null) => Promise,
fetchPublishedRecipes: (user: any) => Promise
}
const ProfileContext = createContext<ProfileContext>(defaultState)
export default ProfileContext
這是我的提供者：
import ProfileContext from './ProfileContext'
import { query, where, getDocs, collection } from 'firebase/firestore'
import { db } from '../services/firebase.config'
import { Cocktail, UserData } from '../types'
import { useState } from 'react'
export default function ProfileContextProvider ({ children }: { children: any }) {
const [userData, setUserData] = useState<UserData | null>(null)
const [favoriteCocktails, setFavoriteCocktails] = useState<Array<Cocktail>>([])
const [publishedRecipes, setPublishedRecipes] = useState<Array<Cocktail>>([])
const fetchUserData = async (user: any) => {
try {
const q = query(collection(db, 'mixrUsers'), where('email', '==', user.email))
const querySnapshot = await getDocs(q)
const result: any[] = []
querySnapshot.forEach(doc => result.push(doc.data()) )
setUserData(result[0])
} catch (err) {
console.error(err)
}
}
const fetchFavoriteCocktails = async (userData: UserData | null) => {
try {
const q = query(collection(db, 'mixrCocktails'), where('id', 'in', userData?.favoriteCocktails))
const querySnapshot = await getDocs(q)
const result: any[] = []
querySnapshot.forEach(doc => {result.push(doc.data())} )
setFavoriteCocktails(result)
} catch (err) {
console.error(err)
}
}
const fetchPublishedRecipes = async (user: any) => {
try {
console.log('fetchPublishedRecipes')
const q = query(collection(db, 'mixrCocktails'), where('publisherId', '==', user?.uid))
const querySnapshot = await getDocs(q)
const result: any[] = []
querySnapshot.forEach(doc => result.push(doc.data()) )
setPublishedRecipes(result)
} catch (err) {
console.error(err)
}
}
return (
<ProfileContext.Provider value={{ userData, favoriteCocktails, publishedRecipes, fetchUserData, fetchFavoriteCocktails, fetchPublishedRecipes }} >
{children}
</ProfileContext.Provider>
)
}
我通過以下方式在不同的組件上使用它：
import { useEffect, useContext } from 'react'
import ProfileContext from '../context/ProfileContext'
import { RootTabScreenProps } from '../types'
import { useAuthState } from 'react-firebase-hooks/auth'
import { auth } from '../services/firebase.config'
import { StyleSheet, Text, View, SafeAreaView, ScrollView, Image, TouchableOpacity } from 'react-native'
import CocktailCard from '../components/home/cocktailCard/CocktailCard'
import GenericAvatar from '../assets/images/genericAvatar.jpg'
export default function ProfileScreen({ navigation }: RootTabScreenProps<'Profile'>) {
/* TODO - Profile context functions break */
const [user] = useAuthState(auth as any)
const {userData, favoriteCocktails, publishedRecipes, fetchUserData, fetchFavoriteCocktails, fetchPublishedRecipes} = useContext(ProfileContext)
useEffect(() => {
fetchUserData(user)
fetchPublishedRecipes(user)
}, [publishedRecipes])
useEffect(() => { if(userData) fetchFavoriteCocktails(userData) },[userData, favoriteCocktails])
/* ====================================== */
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.profileHeader}>
<Image style={styles.profilePicture} source={user ? { uri: user?.photoURL } : GenericAvatar}/>
<Text style={styles.profileName}>{user?.displayName}</Text>
</View>
...
import { useContext, useEffect } from 'react'
import ProfileContext from '../context/ProfileContext'
import { RootTabScreenProps } from '../types'
import { useAuthState } from 'react-firebase-hooks/auth'
import { auth } from '../services/firebase.config'
import { Text, StyleSheet, View } from 'react-native'
import CocktailCard from '../components/home/cocktailCard/CocktailCard'
export default function PublishedRecipesScreen({ navigation }: RootTabScreenProps<'Published recipes'>) {
/* TODO - Profile context functions break */
const [user] = useAuthState(auth as any)
const { publishedRecipes, fetchPublishedRecipes } = useContext(ProfileContext)
useEffect(() => {fetchPublishedRecipes(user)}, [])
/* ====================================== */
return (
<View style={styles.container}>
<Text style={styles.title}>Published recipes</Text>
<View style={styles.cardsContainer}>
{publishedRecipes.map((cocktail, i) => <CocktailCard key={i} cocktail={cocktail} navigation={navigation} />)}
</View>
...
我了解我在背景關系檔案中宣告的型別與函式回傳的實際型別之間存在沖突。但我不明白我應該如何宣告它們。
此函式從資料庫中獲取資料并更新狀態，因此它們不會回傳任何內容。
我試過了fetchUserData: (user: any) => void,，但我得到了 Expression expected.ts(1109)
鍵入此類函式的正確方法是什么？
完整代碼可以在這里找到：https ://github.com/coccagerman/mixr/
提前致謝！
uj5u.com熱心網友回復：
這里它不是一個型別：
const defaultState = {
fetchUserData: (user: any) => Promise,
fetchFavoriteCocktails: (userData: UserData | null) => Promise,
fetchPublishedRecipes: (user: any) => Promise
}
您必須提供一些默認值，因此一些不回傳任何內容的異步函式將起作用：
const defaultState = {
fetchUserData: async (user: any) => {},
fetchFavoriteCocktails: async (userData: UserData | null) => {},
fetchPublishedRecipes: async (user: any) => {}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/433661.html