我创建了一个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());
但它返回待定的承诺并无限期地运行。
1条答案
按热度按时间2guxujil1#
这是因为您的状态和操作创建者的名称相同,并且操作创建者正在覆盖
props
中的状态变量。你必须重命名你的动作创建者或者状态变量名。我会说,为动作创建者保留
fetch
前缀,这样就很清楚它将从服务器获取项目。然后,在您的
componentDidMount
中,您可以更新函数名称: