时间戳

首页 > 解决方案 > Redux 获取无法读取未定义的属性映射

reactjs - Redux 获取无法读取未定义的属性映射

问题描述

我正在尝试通过 redux 获取一些数据，并尝试在 Fedp.js 组件中呈现它。但我在映射时遇到错误。你能告诉我我在整个样板中哪里出错了吗？

productActions.js

export function fetchProducts() {
  return function(dispatch) {
    dispatch({
      type: 'FETCH_PRODUCTS_REQUEST'
    });
    return fetch('/products')
      .then(response => response.json().then(body => ({ response, body })))
      .then(({ response, body }) => {
        if (!response.ok) {
          dispatch({
            type: 'FETCH_PRODUCTS_FAILURE',
            error: body.error
          });
        } else {
          dispatch({
            type: 'FETCH_PRODUCTS_SUCCESS',
            products: body.products
          });
        }
      });
    }
 }


productReducer.js

const initialState = {
  products: []
};


export  function productsReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_PRODUCTS_REQUEST':
      return Object.assign({}, state, {
        isFetching: true
      });
    case 'FETCH_PRODUCTS_SUCCESS':
      return Object.assign({}, state, {
        isFetching: false,
        products: action.products
      });
    case 'FETCH_PRODUCTS_FAILURE':
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error
      });
    default:
      return state;
  }
}


indexreducer.js：

import { combineReducers } from 'redux';
import { productsReducer } from './productReducer';

export default combineReducers({
  products: productsReducer
});


configureStore.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/indexReducer';

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

export default configureStore


index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App.js'
import configureStore from './Redux/store/configureStore';
import { Provider } from 'react-redux';



const store = configureStore();


ReactDOM.render( <Provider store={store}><App /></Provider>, document.getElementById('root'))


Fedp.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProducts } from '../Redux/actions/productAction';




class Fedp extends Component {

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


  render() { 
    return (
            <ul>
            {this.props.products.map((details, index)=>{
              <li key={item.id}> {details.name} + {details.price} </li>
        })}
          </ul>
    );
  }
}




function mapStateToProps(state) {
  return {
    products: state.products
  };
}


function mapDispatchToProps(dispatch) {
  return {
    fetchProducts: function() {
      dispatch(fetchProducts());
    }
  };
}




export default connect(mapStateToProps, mapDispatchToProps)(Fedp);

标签： reactjsreduxreact-redux

解决方案

在该mapStateToProps方法中，您将返回 state.productsas的值products。但是state.products是减速器本身，而不是您从 API 调用中获取的结果数组。

下面的这个块创建了一个state带有参数中提到的所有键的 redux 对象combineReducers。

export default combineReducers({
    products: productsReducer
});

如上所示，除了state.products您的之外别无他物。productsReducer现在，您从 API 调用中获取的值存储products在productsReducer. 因此，访问这些值的正确方法是state.products.products.

将您的修改mapStateToProps为以下块，它应该可以工作。

function mapStateToProps(state) {
    return {
        products: state.products.products
    };
}

推荐阅读