从 Redux 中的 fetch 调用将数组返回到 React 组件

Question

我在从我在 Redux 中设置的 Express 服务器的 fetch 调用中将数组返回到我的 React 组件时遇到问题。

我试图从 Express 的这个 json 中返回维生素数组：

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

这是我的 actions.js 中的 fetch 调用和 FETCH_VITAMINS_SUCCESS 操作。

 export function fetchVitamins() {
   return dispatch => {
     return fetch("/users")
      .then(res => res.json())
      .then(micros => {
        dispatch(fetchVitaminsSuccess(micros.vitamins));
        return micros.vitamins;
    })
  };
 }

 export const FETCH_VITAMINS_SUCCESS = 'FETCH_VITAMINS_SUCCESS';

 export const fetchVitaminsSuccess = vitamins => ({
    type: FETCH_VITAMINS_SUCCESS,
    payload: { vitamins }
 });

这是我的 reducers.js，我试图将状态设置为“micros.vitamins”。

 const initialState = {
   micros: [],
 };

 function vitaminReducer(state = initialState, action) {
    switch(action.type) {
    case FETCH_VITAMINS_SUCCESS:
    return {
       ...state.vitamins,
       micros: action.payload
    };
  default:
    return state;
  }
}

这是我的 React 组件 Vitamins.js，我在其中导入 fetchVitamins() 并尝试将每种维生素的名称传递给选项标签中的菜单下拉菜单。

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

renderData() {
   const { vitamins } = this.state.micros;
   return vitamins.map((micro, index) => {
      return (
        <option value={micro.value} key={index}>{micro.name}</option>
      )
   })
 } 

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

const mapStateToProps = state => ({
   micros: state.vitamins,
});

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

现在我得到了错误“TypeError: Cannot read property 'micros' of null”，突出显示了我的 renderData() 函数。

Answer 1

应该是：

const { vitamins } = this.props.micros;

因为您将 micros 作为来自 redux 的 props 传递。当您尝试从状态访问它时（我猜它没有初始化，这就是它为空的原因）。

另一件事，你在有效载荷中传递对象：

export const fetchVitaminsSuccess = vitamins => ({
  type: FETCH_VITAMINS_SUCCESS,
  payload: { vitamins }
});

并在你的 reducer 中将其设置为 micros：

switch(action.type) {
case FETCH_VITAMINS_SUCCESS:
return {
   ...state.vitamins,
   micros: action.payload
};

但是，您的 micros 最初是一个数组，可能会导致意外错误。也许您应该将初始状态更改为类似于以下响应的状态：

const initialState = {
  micros: {
    vitamins: []
  },
};

这样const { vitamins } = this.state.micros; 将始终返回一些数组 - 在响应之前和之后。