React redux mapStateToProps 未設置返回到我的道具

Question

使用 prop 時出現問題，它從null開始，然后我使用map但因為它是null返回錯誤。

然后最終沒有響應更新的狀態：

class HomeProducts extends Component {

    componentDidMount() {
        this.props.fetchProduct();
      }
    render() {
        console.log(this.props)

      const productItems = this.props.products.map( product => (
          <div className="col-md-4 pt-4 pl-2">
          <div className = "thumbnail text-center"> 
          <a href={`#${product.id}`}  onClick={(e)=>this.props.handleAddToCard(e,product)}>
              <p>
                  {product.name}
              </p>
          </a>
          </div>
              <b>{util.formatCurrency(product.price)}</b>
              <button className="btn btn-primary" onClick={(e)=>this.props.handleAddToCard(e,product)}>Add to Cart</button>
          </div>
      )
      )
        return (
            <div className="container">
            <div className="row">

            </div>  
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return{
        products: state.data.products,
        loading: state.data.loading,
        error: state.data.error
    }
  };
  const mapActionsToProps = {
    fetchProduct: fetchProduct
};
export default connect(mapStateToProps, mapActionsToProps)(HomeProducts);

我的減速機：

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    products: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {

    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          ...state, products: action.data
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.error
        };
      default:
        return state;
    }
  }

我的行動：

import api from '../../services/api';
import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

const fetchSucess = data => ({
    type: FETCH_SUCESS,
    data

  });

  const fetchStarted = () => ({
    type: FETCH_LOADING
  });

  const fetchFailed = error => ({
    type: FETCH_FAIL, 
      error
  });

  export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

我的合路器減速器：

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({
    data: productReducer 
});

我的店鋪：

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}

我得到了：

無法讀取未定義的屬性“地圖”

Answer 1

你能在不使用 createStore 中的 initialState 的情況下嘗試這樣嗎？

  return createStore(
        rootReducer,
        applyMiddleware(thunk)
    );

似乎當我們嘗試在 createStore 和 reducer 中初始化狀態時，某些東西被破壞了。

文檔

Answer 2

看來您需要檢查您的減速器中的initialState ，看看您是否真的有一個用於products的空數組。 這樣您就不必處理在第一次加載時為空的情況。 因此，當使用[]的 initialState 時，您還可以為用戶處理不同的消息，例如（如果數組為空，則顯示 LOADING（對於您還在減速器中處理該狀態的情況）或 EMPTY 列表，當你實際上完成了數據的加載。