Redux中从Express接口获取数组传递给React组件报错求助

我帮你梳理下问题所在，一步步来解决这个报错：

报错 TypeError: Cannot read property 'micros' of null 的直接原因是你在组件里错误地访问了 this.state.micros，但实际上你通过 mapStateToProps 把Redux状态映射到了组件的props而非state，再加上Redux状态的初始化、更新逻辑存在问题，导致初始渲染时数据无法正确加载。

下面逐个文件修正：

1. 修复Express接口代码 #

你的接口没有正确返回JSON响应，需要调用 res.json() 来发送数据：

router.get('/', function(req, res, next) {
  res.json({
    vitamins: [ { name: "Vitamin B2" } ],
    minerals: [ { name: "Zinc" } ]
  });
});

2. 修正Redux Reducer逻辑 #

你的reducer存在两个核心问题：

• 状态更新时错误展开了 state.vitamins（初始状态里根本没有这个属性）
• action.payload 是包含 vitamins 属性的对象，你需要把 micros 设置为 action.payload.vitamins 而非整个payload

修正后的reducer：

const initialState = {
  micros: [],
};

function vitaminReducer(state = initialState, action) {
  switch(action.type) {
    case FETCH_VITAMINS_SUCCESS:
      // 保留原有状态，将micros更新为获取到的vitamins数组
      return { 
        ...state, 
        micros: action.payload.vitamins 
      };
    default:
      return state;
  }
}

3. 修复React组件逻辑 #

组件里的问题比较集中，逐一修正：

• 访问 micros 应该从 this.props 取，不是 this.state
• 初始渲染时 micros 是空数组，要做防空处理避免map报错
• 你的数据里没有 micro.value 字段，应该用 micro.name 作为option的value（可根据需求调整）
• mapStateToProps 要正确映射Redux状态：假设你把 vitaminReducer 注册到了store的 vitamins 键下，需要取 state.vitamins.micros

修正后的Vitamins.js：

componentDidMount() {
  this.props.fetchVitamins();
}

renderData() {
  // 从props获取micros，先判断是否存在且有数据
  const { micros } = this.props;
  if (!micros || micros.length === 0) {
    return <option>No vitamins available</option>;
  }
  return micros.map((micro, index) => {
    // 用micro.name作为value，因为数据里没有value字段
    return (
      <option value={micro.name} key={index}>{micro.name}</option>
    )
  })
}

render() {
  return (
    <select value={this.props.value}>
      {this.renderData()}
    </select>
  )
}

// 正确映射Redux中的micros数组
const mapStateToProps = state => ({
  micros: state.vitamins.micros,
});

export default connect(mapStateToProps, { fetchVitamins })(Vitamins);

额外检查点 #

• 确保创建Redux store时正确注册了vitaminReducer，比如：

  import { combineReducers } from 'redux';
  import vitaminReducer from './reducers';
  
  const rootReducer = combineReducers({
    vitamins: vitaminReducer // 这里的键名要和mapStateToProps里的state.vitamins对应
  });
  

• 检查fetch的URL是否正确：你的action里请求的是/users，但Express接口是/（假设是根路径），如果接口路径不匹配会导致获取不到数据，记得调整为正确的接口地址。

这样修改后，就能正确获取并渲染vitamins数组，也不会再出现Cannot read property 'micros' of null的报错了。

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