You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 15:35:24