Redux预加载状态遇未知键studentYears错误，求添加模拟JSON到组件的方法

这个错误的原因很明确——你在initialState里定义了studentYears这个状态项，但你的rootReducer并没有对应的reducer来管理它。Redux的combineReducers只会识别你传入的那些reducer键，所以它找不到studentYears对应的处理逻辑，就抛出了这个错误。下面是完整的解决步骤：

1. 创建专门处理studentYears的Reducer #

首先新建一个studentYearsReducer.js文件，用来管理这个状态：

// studentYearsReducer.js
// 这里可以直接把你的模拟JSON作为初始状态
const initialStudentYearsState = [
  { id: 1, title: "Year 1", options: ["Firm 1", "Firm 2", "Firm 3"] },
  { id: 2, title: "Year 2", options: ["Firm 2", "Firm 3", "Firm 4"] },
  { id: 4, title: "Year 3", options: ["Firm 5", "Firm 6", "Firm 7"] }
];

// 暂时不需要处理任何action，先返回默认状态即可
export default function studentYearsReducer(state = initialStudentYearsState, action) {
  return state;
}

2. 将新Reducer添加到Root Reducer中 #

修改你的rootReducer代码，把刚才创建的studentYearsReducer导入并添加到combineReducers的参数里，确保键名和initialState里的studentYears一致：

// combineReducer
import { combineReducers } from "redux";
import { events, eventsHasErrored, eventsIsLoading, calendarView } from "./events";
import navigationReducer from "./navigationReducer";
import studentYearsReducer from "./studentYearsReducer"; // 导入新的reducer

const rootReducer = combineReducers({ 
  events, 
  eventsHasErrored, 
  eventsIsLoading, 
  calendarView, 
  navigationReducer,
  studentYears: studentYearsReducer // 添加这个键，和initialState中的对应
});
export default rootReducer;

3. （可选）调整Initial State #

现在你可以选择保留initialState里的studentYears，或者直接删除它——因为我们已经在studentYearsReducer里定义了初始状态，Redux会自动合并这些状态。如果保留的话，确保键名和rootReducer里的完全一致（注意你原来的代码里有个小写id和大写Id的笔误，建议统一改成小写id）：

const initialState = { 
  eventsHasErrored: false, 
  eventsIsLoading: true, 
  events: [], 
  calendarView: 0, 
  studentYears: [ 
    { id: 1, title: "Year 1", options: ["Firm 1", "Firm 2", "Firm 3"] }, 
    { id: 2, title: "Year 2", options: ["Firm 2", "Firm 3", "Firm 4"] }, 
    { id: 4, title: "Year 3", options: ["Firm 5", "Firm 6", "Firm 7"] } 
  ] 
};

4. 在组件中获取并使用这个状态 #

现在你可以通过Redux的连接方法在组件中拿到studentYears数据，生成选择列表：

函数组件（使用useSelector） #

import { useSelector } from 'react-redux';

function YearSelector() {
  // 从Redux store中获取studentYears状态
  const studentYears = useSelector(state => state.studentYears);
  
  return (
    <div className="year-selectors">
      {studentYears.map(year => (
        <div key={year.id} className="year-group">
          <h4>{year.title}</h4>
          <select>
            {year.options.map((firm, index) => (
              <option key={index} value={firm}>
                {firm}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  );
}

export default YearSelector;

类组件（使用connect） #

import React from 'react';
import { connect } from 'react-redux';

class YearSelector extends React.Component {
  render() {
    const { studentYears } = this.props;
    return (
      <div className="year-selectors">
        {studentYears.map(year => (
          <div key={year.id} className="year-group">
            <h4>{year.title}</h4>
            <select>
              {year.options.map((firm, index) => (
                <option key={index} value={firm}>
                  {firm}
                </option>
              ))}
            </select>
          </div>
        ))}
      </div>
    );
  }
}

// 把Redux状态映射到组件props
const mapStateToProps = state => ({
  studentYears: state.studentYears
});

export default connect(mapStateToProps)(YearSelector);

这样你的错误就会被修复，模拟的JSON数据也能顺利在组件中渲染成选择列表了。

内容的提问来源于stack exchange，提问作者Bomber