狀態在mapStateToProps中未定義

Question

我一直在嘗試從我的VitaminReducer（）reducer函數中檢索新狀態，並通過mapStateToProps連接它。 但是，當我用console.log記錄狀態時，我會返回“狀態為{維生素：未定義}”。

這是我調用mapStateToProps（）（Vitamins.js）的Vitamins組件。

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

  function mapStateToProps(state) {
     return {
      vitamin: state,
     }
  };

  console.log('the state is', mapStateToProps());

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

（reducers.js）

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


  const reducers = combineReducers({
    vitamin: vitaminReducer,
  });

我有通過Express服務器發送的數據。 我已經在控制台上記錄了“維生素”，然后我又獲得了數據，所以我知道這不是問題。

（actions.js）

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

  export const FETCH_VITAMINS_SUCCESS = 'FETCH_VITAMINS_SUCCESS';

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

如果我這樣做：“返回{維生素：state.vitamin，}”而不是“返回{維生素：state，}”，我將得到“ TypeError：無法讀取未定義的屬性'維生素'”。 但這就是我在reducers.js底部的CombineReducers（）函數中所謂的VitaminReducer的原因，所以我認為這是正確的方法。

Answer 1

謝謝大家的投入！ 我能夠使它工作。

我拋棄了mapStateToProps（），而是這樣做了

（Vitamins.js）

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

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

  export default connect(
   state => ({
     vitamins: state.vitamins
   }),
   {
    fetchVitamins
   },
   )(Vitamins);

我在fetchVitamins（）函數內部設置了調度動作

（actions.js）

  export function fetchVitamins() {
   return dispatch => {
      return fetch("/users")
       .then(handleErrors)
       .then(res => res.json())
       .then(micros => {
         dispatch({
           type: "RECEIVE_VITAMINS",
           payload: micros.vitamins
         });
        }
     )};
   };

   export const RECEIVE_VITAMINS = 'RECEIVE_VITAMINS';

在減速器中，我將initialState設置為維生素數組，並從RECEIVE_VITAMINS動作中傳遞了micros.vitamins的新狀態。

（reducers.js）

  const initialState = {
    vitamins: [],
  }

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


const reducers = combineReducers({
   vitamins: vitaminReducer,
});

謝謝大家的幫助！ 讓我知道您是否還有其他建議：D