javascript - React redux mapStateToProps 未设置返回我的道具
问题描述
使用道具时出现问题,它开始时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)
);
}
我得到了:
无法读取未定义的属性“地图”
解决方案
您可以在 createStore 中不使用 initialState 的情况下尝试这样吗?
return createStore(
rootReducer,
applyMiddleware(thunk)
);
似乎当我们尝试在 createStore 和 reducer 中初始化状态时,出现了问题。
推荐阅读
- python-3.x - 使用 re.sub 转义包含 Python 中的捕获组的原始字符串中的反斜杠
- shell - 更改 FASTA 文件头
- java - 从数组中收集键值以映射而不重复
- python - 当我迁移到 Django 时,所有帐户都被删除
- r - 这两个版本或 R 有什么区别?
- php - PHP 自定义错误处理程序类记录/显示重复错误
- javascript - Optimizing Firebase cloud functions structure in node.js
- java - Java - 如何读取同一目录中的所有文件
- c++ - 用于计算的“|”或“&”与内部 IF 语句之间的区别
- sitefinity - sitefinity ControllerToolboxItem 与 MVC 控制器