Question

我正在尝试通过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);

Answer 1

在mapStateToProps方法中，您将state.products的值返回为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
    };
}

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

1 个答案: