Блог

У меня есть эта функция в WorkoutController.js

 export async function getFavourites(FavRetrived) {
    var FavList = []
    var snapshot = await firebase
        .firestore()
        .collection("Favourites")
        .doc(firebase.auth().currentUser.uid)
        .collection("userFavourites")
        .get()
    snapshot.forEach((doc) => {
        const favDoc = doc.data()
        favDoc.id = doc.id
        FavList.push(favDoc)
    })
    FavRetrived(FavList)
}
 

Я использовал в основном плоские списки для получения данных из коллекции, и это хорошо работает, но теперь я хочу использовать массив идентификаторов для выполнения некоторых элементов управления.

Я думаю, что вторая часть кода создает массив идентификаторов, но я не знаю, как его использовать или показывать.

в Screen.js У меня есть

 import { getFavourites } from '../context/WorkoutController'
const [FavList, setFavList] = useState()

 useEffect(() => {
  
    getDataFav()
  }, [])

    function getDataFav() {
    getFavourites(FavRetrieved)
    }

    function FavRetrieved(FavList) {
    setFavList(FavList)
    }

 

Например, если я использую плоский список, передающий список избранных в качестве данных, я могу видеть все элементы коллекции, но что, если я хочу показать только первый идентификатор массива?
Я не хочу использовать функцию where, мне нужно видеть данные в виде массива, например, что-то вроде FavList[0].имя (но это не работает)

Во — первых, нам нужно настроить getFavourites его так, чтобы он обрабатывал случай, когда пользователь не вошел в систему со значимой ошибкой, и он не должен использовать обратные вызовы, если вы используете async await синтаксис / — вместо этого просто используйте цепочку обещаний.

 export async function getFavourites() {
    const user = firebase.auth().currentUser;

    if (!user)
        return Promise.reject(new Error("User must be signed in first"));

    const favList = []
    const snapshot = await firebase
        .firestore()
        .collection("Favourites")
        .doc(user.uid)
        .collection("userFavourites")
        .get()

    snapshot.forEach((doc) => {
        const favDocData = doc.data()
        favDocData.id = doc.id
        favList.push(favDocData)
    })

    return favList
}
 

Затем вы бы использовали его в своем компоненте следующим образом:

 import { getFavourites } from '../context/WorkoutController'

// status of favList
const [status, setStatus] = useState("loading")
// array of favourites
const [favList, setFavList] = useState()
// error message to show user
const [errorMsg, setErrorMsg] = useState("")

useEffect(() => { 
    let disposed = false

    getFavourites()
        .then((newFavList) => {
            if (disposed) return // component discarded, do nothing.

            setFavList(newFavList)
            setErrorMsg("")
            setStatus("fetched")
        })
        .catch((err) => {
            if (disposed) return // component discarded, do nothing.

            console.error("getFavourites failed: ", err)
            setErrorMsg("Failed to get favourites")
            setStatus("error")
        });

    // return cleanup function
    return () => disposed = true
}, []);

if (status === "loading")
  return (<Spinner />)

if (status === "error")
  return (<div key="error">{errorMsg}</div>)

// if here, favList is now an array of favourite documents data
return ( /* ... render favList ... */ )
 

 export async function getFavourites(FavRetrived) {
    var FavList = []
    var snapshot = await firebase
        .firestore()
        .collection("Favourites")
        .doc(firebase.auth().currentUser.uid)
        .collection("userFavourites")
        .get()
    snapshot.forEach((doc) => {
        const favDoc = doc.data();
        const id = doc.id;
        FavList.push({ id, ...favDoc })
    })
    FavRetrived(FavList)
}
 

Вы можете получить к нему доступ по FavList[0].id