Redux Selector返回错误状态切片,React闪卡项目报错求助
Redux选择器意外返回topics状态而非quizzes状态的问题
我正在完成Codecademy的React+Redux闪卡项目,该项目需要实现一个可创建主题并为每个主题制作测验的闪卡应用。
我编写了如下选择器:
export const selectQuizzes = (state) => state.quizzes.quizzes;
它本应返回如下状态切片:
quizzes: { quizzes: { '456': { id: '456', topicId: '123', name: 'quiz for example topic', cardIds: ['789', '101', '102'] } } },
但实际返回的却是topics的状态切片:
topics: { topics: { '123': { id: '123', name: 'example topic', icon: 'icon url', quizIds: ['456'] } } },
以下是完整的quizzesSlice.js文件:
import { createSlice } from "@reduxjs/toolkit"; import { addQuizId } from "../topics/topicsSlice"; //* Define the options that createSlice will use const sliceOptions = { name: "quizzes", initialState: { quizzes: {} }, reducers: { addQuiz: (state, action) => { const { id, name, topicId, cardIds } = action.payload; state.quizzes[id] = { id: id, topicId: topicId, name: name, cardIds: cardIds }; } } }; export const addQuizThunk = (quiz) => { const { id, topicId } = quiz; return (dispatch) => { dispatch(quizzesSlice.actions.addQuiz(quiz)); dispatch(addQuizId({ quizId: id, topicId: topicId })); }; }; //* Create a new slice of state with the sliceOptions configuration object export const quizzesSlice = createSlice(sliceOptions); //* Selectors export const selectQuizzes = (state) => state.quizzes.quizzes; //* Export actions generated by createSlice() export const { addQuiz } = quizzesSlice.actions; //* Export reducer generated by createSlice() export default quizzesSlice.reducer;
我尝试在Quizzes.js文件中使用该选择器:
import { Link } from "react-router-dom"; import ROUTES from "../../app/routes"; import { useSelector } from "react-redux"; import { selectQuizzes } from "./quizzesSlice"; export default function Quizzes() { const quizzes = useSelector(selectQuizzes); // replace this with a call to your selector to get all the quizzes in state return ( <section className="center"> <h1>Quizzes</h1> <ul className="quizzes-list"> {Object.values(quizzes).map((quiz) => ( <Link key={quiz.id} to={ROUTES.quizRoute(quiz.id)}> <li className="quiz">{quiz.name}</li> </Link> ))} </ul> <Link to={ROUTES.newQuizRoute()} className="button"> Create New Quiz </Link> </section> ); }
但运行时控制台抛出Cannot convert undefined or null to object错误,这是因为选择器返回了错误的状态切片,我不清楚问题出在哪里?
内容的提问来源于stack exchange,提问作者Ben W
相关产品推荐
相关产品推荐

