從 firebase v9 檢索到的數據未定義

Question

當檢索數據並對其進行console.log時，數據顯示完美，但是當嘗試使用參數作為數據分派操作時，結果是undefined 。

我嘗試在dispatch操作之前使用 await，但它沒有改變任何東西。 為什么會這樣？

動作.js

import * as types from './actionTypes'
import { db } from '../firebase';
import { collection, getDocs } from "firebase/firestore";

const getFeedbacksStart = () => ({
    type: types.GET_FEEDBACKS_START,
});

const getFeedbacksSussess = (feedbacks) => ({
    type: types.GET_FEEDBACKS_SUCCESS,
    payload: feedbacks
});

const getFeedbacksFail = () => ({
    type: types.GET_FEEDBACKS_FAIL,
});


export const getFeedbacks = () => {
    return async function (dispatch) {
        dispatch(getFeedbacksStart());

        try {
            const querySnapshot = await getDocs(collection(db, "feedbacks"));
            querySnapshot.forEach((doc) => {
                console.log(doc.id, " => ", doc.data())
            });

            const feedbacks = querySnapshot.forEach((doc) => doc.data());

            dispatch(getFeedbacksSussess(feedbacks))


        } catch (error) {
            dispatch(getFeedbacksFail(error))
        }
    }
}

actionTypes.js

export const GET_FEEDBACKS_START = 'GET_FEEDBACKS_START';
export const GET_FEEDBACKS_SUCCESS = 'GET_FEEDBACKS_SUCCESS';
export const GET_FEEDBACKS_FAIL = 'GET_FEEDBACKS_FAIL';

reducer.js

import * as types from './actionTypes'

const initialState = {
    feedbacks: {},
    loading: false,
    error: null,
};

const feedbackReducer = (state = initialState, action) => {
    switch (action.type) {
        case types.GET_FEEDBACKS_START:
            return {
                ...state,
                loading: true
            }
        case types.GET_FEEDBACKS_SUCCESS:
            return {
                ...state,
                loading: false,
                feedbacks: action.payload,
            }
        case types.GET_FEEDBACKS_FAIL:
            return {
                ...state,
                loading: false,
                error: action.payload,
            }
        default:
            return state;
    }

}

export default feedbackReducer;

root-reducer.js

import { combineReducers } from "redux";

import feedbackReducer from "./reducer";

const rootReducer = combineReducers({
    data: feedbackReducer, 
});

export default rootReducer;

商店.js

import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import rootReducer from './root-reducer';
  
const store = configureStore({
    reducer: rootReducer,
    middleware: [thunk, logger],
});

export default store;

ListRecord.js我在其中發送操作

import React, { useEffect, useState, useContext } from "react";
import { useSelector, useDispatch } from 'react-redux';
import { getFeedbacks } from "../redux/actions";


const ListRecord = () => {
    const [data, setData] = useState({});
    console.log("data", data);

    const state = useSelector(state => state.data);
    console.log("state =>", state);

    let dispatch = useDispatch();

    useEffect(() => {
        dispatch(getFeedbacks());
    }, [])



    return (
        <>

        </>
    );
};

export default ListRecord;

Answer 1

我弄清楚我做錯了什么。 我試圖以錯誤的方式檢索數據。 我試圖在集合上使用forEach方法。 首先，它需要引用 db -> querySnapshot.docs中的文檔，然后您可以使用.map()方法並遍歷數據庫中的整個集合。

如何正確使用 firebase v9 的示例在這里

這是一個工作代碼:)

在actions.js中

export const getFeedbacks = () => {
    return function (dispatch) {
        dispatch(getFeedbacksStart())

        const getData = async () => {
            try {
                const querySnapshot = await getDocs(collection(db, "feedbacks"));
                const feedbacks = querySnapshot.docs.map((doc) => ({
                    ...doc.data(),
                    id: doc.id
                }))
                dispatch(getFeedbacksSussess(feedbacks));

            } catch (error) {
                dispatch(getFeedbacksFail(error))
            }

        }
        getData();
    }
}