Uso React & Redux e intento obtener datos de la API JSON. Pero no puedo leer mis datos obtenidos en componentes.
Devuelve un Uncaught TypeError: this.props.categories.map is not a function .
No sé por qué devolver esto. A veces, el proceso de búsqueda entra en un bucle infinito ¡Por favor, ayúdenme!
Mis códigos de acción:
export function getCategogiesSuccess(categories) { return { type: actionTypes.GET_CATEGORIES_SUCCESS, payload: categories }; } export function getCategories() { return function (dispatch) { let url = "http://localhost:3000/categories"; return fetch(url) .then(response => response.json()) .then(result => { dispatch(getCategogiesSuccess(result)); }); }; }Mis Códigos Reductores :
export default function categoryListReducer( state = initialState.currentCategory, action, ) { switch (action.type) { case actionTypes.GET_CATEGORIES_SUCCESS: return action.payload; default: return state; } }Estados iniciales:
export default { currentCategory: {}, categories: [], };Ver códigos de componentes:
class CategoryList extends Component { componentDidMount() { this.props.actions.getCategories(); } render() { return ( <div> <h3>Categories</h3> <ListGroup> {this.props.categories.map(category => ( <ListGroupItem onClick={() => this.selectCategory(category)} key={category.id} > {category.categoryName} </ListGroupItem> ))} </ListGroup> </div> ); } } function mapStateToProps(state) { return { categories: state.categoryListReducer, }; } function mapDispatchToProps(dispatch) { return { actions: { getCategories: bindActionCreators( categoryActions.getCategories, dispatch, ), }, }; } export default connect(mapStateToProps, mapDispatchToProps)(CategoryList);