redux mapStateToProps返回的是函数而不是数组

7dl7o3gd  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(111)

我创建了一个reducer,action creator和一个mapStateToProps。当我从mapStateToProps记录状态时,它记录了预期的数据,但当我在props中记录时,它返回了一个类似模板的函数。我不知道那里发生了什么。
"我需要帮助"

减速器

import { FETCH_PRODUCTS } from '../action/types';

const init = [];
const productsReducer = (state = init, action) => {
  switch (action.type) {
    case FETCH_PRODUCTS:
      return action.payload;

    default:
      return state;
  }
};

export default productsReducer;

操作创建者

export const fetchProducts = () => async (dispatch) => {
  const { data } = await apiData(products);

  dispatch({
    type: FETCH_PRODUCTS,
    payload: data.categories,
  });
};

Map到属性的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { fetchCategories, fetchProducts } from '../../../redux/action/actionCreators';
import './women.css';

class All extends Component {
  componentDidMount() {
    this.props.categories();
    this.props.products();
  }

  render() {
    console.log(this.props.products);
    return (<div>Hell0</div>);
  }
}

const mapStateToProps = (state) => { 
  // console.log(state);
   return { products: state.products }
  };

export default connect(mapStateToProps,
  {
    categories: fetchCategories,
    products: fetchProducts,
  })(All);

我得到的结果

ƒ () {
        return dispatch(actionCreator(...arguments));
      }

代替数组

我尝试过将乘积作为函数调用,方法是在函数末尾添加括号,类似于

console.log(this.props.products());

但它返回待定的承诺并无限期地运行。

2guxujil

2guxujil1#

这是因为您的状态和操作创建者的名称相同,并且操作创建者正在覆盖props中的状态变量。

const mapStateToProps = (state) => { 
  return { 
    // this.props.products -> state
    products: state.products 
  }
};

export default connect(mapStateToProps, {
  categories: fetchCategories,

  // this.props.products -> action creator
  products: fetchProducts,
})(All);

你必须重命名你的动作创建者或者状态变量名。我会说,为动作创建者保留fetch前缀,这样就很清楚它将从服务器获取项目。

const mapStateToProps = (state) => { 
  // console.log(state);
  return { products: state.products }
};

export default connect(mapStateToProps, {
  fetchCategories,
  fetchProducts,
})(All);

然后,在您的componentDidMount中,您可以更新函数名称:

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

相关问题