reactjs - 在 redux 中使用调度时遇到问题

Question

我尝试获取 firestore 数据库并在 redux 中分派(dispatch)该数据库。并在我的列表页中打印该数据库。 我成功获取firestore数据库，console.log打印所有数据。但我尝试使用map()函数。只打印一项数据。我不知道为什么会发生这种事。 我认为我的代码是错误的。但我不知道我哪里错了。

DictCard.js

import { collection, getDocs} from "firebase/firestore";
import React, { useEffect } from "react";
import { db } from "../firebase"; 
import { useSelector, useDispatch  } from "react-redux";
import { getDict } from "../redux/ListReducer";

const Card = ({dict}) => {
    return(
        <div className="inbox">
            <p className="text1">단어</p>
            <p className="text2">{dict.word}</p>
            <p className="text1">설명</p>
            <p className="text2">{dict.explain}</p>
            <p className="text1">예시</p>
            <p className="text2" style={{color:"lightskyblue",paddingBottom:"0"}}>{dict.example}</p>
        </div>
    )
}

const DictCard = () => {
    const dictList = useSelector((state) => state.dictList.dicts);
    const dispatch = useDispatch();

    useEffect( async () => {
        const query = await getDocs(collection(db, "dict"));
        query.forEach(doc => {
            console.log([doc.id, doc.data()])
            dispatch(getDict([{id: doc.id, text: doc.data()}]))
        });
    },[]);


    return(
        <div className="dict-card" >
            {dictList.map((dict) => (
                <Card dict = {dict.text} key = {dict.id}/>
            ))}
        </div>
    )
}

export default DictCard;

ListReducer.js

import { createSlice } from "@reduxjs/toolkit";

// const initialState = [{id:"",text:{word:"",explain:"",example:""}}]

const initState = {
    dicts: [{
        id:"",
        text:{
            word:"",
            explain:"",
            example:""
        }
    },]
}

export const ListReducer = createSlice({
    name: "dictList",
    initialState: initState,
    reducers: {
        addDict: (state, action) => {
            state.dicts = action.payload
        },
        getDict: (state, action) => {
            state.dicts = action.payload
        },
        updateDict: (state, action) => {
        },
        deleteDict:  (state, action) => {
        },
    },
});

export const { addDict, getDict, updateDict, deleteDict } = ListReducer.actions;

export default ListReducer.reducer;

我认为调度的位置是错误的，但我不知道

Answer 1

我解决了问题。

 useEffect( async () => {
        const arr = []
        const query = await getDocs(collection(db, "dict"));
        query.forEach(doc => {
            console.log([doc.id, doc.data()])
            // dispatch(getDict([{id: doc.id, text: doc.data()}]))
            arr.push({id: doc.id, text: doc.data()})
        });
        dispatch(getDict(arr))
    },[]);

需要创建空数组