Minha função esta dando um erro por ser um objeto , mas não consigo tranformar isso em um array ou algo que solucione meu problem. ERRO:
TypeError: getToProfile.map is not a function
CÓDIGO DO PROJETO:
import React from'react';
import styled from 'styled-components';
import { connect } from "react-redux";
import { Paragraph , EditContent, Adress, ParagraphDefaultAdress, ParagraphAdress, HistoricParagraph, HistoricLine, HistoricContainer, ContainerOrderCard, TitleOrder, DateOrderCard, SubtotalOrder, ParagraphOnly, EditData, EditAdress } from '../../style/profilePage';
import Edited from "../../imagens/ícones/edit.svg"
import Footer from '../Footer';
import Header from '../../components/Header';
import { routes } from '../Router';
import { push } from 'connected-react-router'
import { getProfile } from '../../action/profile'
export const AppWrapper = styled.div`
width: 100%;
height: 100%;
`
class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount(){
this.props.getProfile()
}
render() {
const { goToEditAddressPage, goToEditDataUserPage, getToProfile } = this.props
console.log("testando profile", getToProfile)
return (
<AppWrapper>
<Header title="Meu Perfil"/>
{getToProfile && getToProfile.map((user) => (
<div>
<EditContent>
<Paragraph >Bruna Oliveira</Paragraph>
<Paragraph >bruna_o@gmail.com</Paragraph>
<Paragraph >(11) 964395291</Paragraph>
<EditData src={Edited} onClick={goToEditDataUserPage}/>
</EditContent>
<Adress>
<ParagraphDefaultAdress> Endereço cadastrado </ParagraphDefaultAdress>
<ParagraphAdress>Rua Alessandra Vieira, 42 - Santana</ParagraphAdress>
<EditAdress src={Edited} onClick={goToEditAddressPage}/>
</Adress>
</div>
))}
<HistoricContainer>
<HistoricParagraph>Histórico de pedidos</HistoricParagraph>
<HistoricLine/>
{/* <ParagraphOnly>Você não realizou nenhum pedido</ParagraphOnly> */}
</HistoricContainer>
<ContainerOrderCard>
<TitleOrder>Bullguer Vila Madalena</TitleOrder>
<DateOrderCard>23 de outubro de 2019</DateOrderCard>
<SubtotalOrder>SUBTOTAL R$67,00</SubtotalOrder>
</ContainerOrderCard>
<Footer />
</AppWrapper>
);
}
}
const mapStateToProps = state => ({
getToProfile: state.profileReducer.profile
})
const mapDispatchToProps = dispatch => ({
goToEditDataUserPage: () => dispatch(push(routes.editDataUserPage)),
goToEditAddressPage: () => dispatch(push(routes.editAddressPage)),
getProfile: () => dispatch(getProfile())
})
export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);
REDUCER:
const initialState = {
profile: [{}],
}
const profileReducer = (state = initialState, action) => {
switch(action.type){
case "SET_PROFILE":
const profileList = action.payload.profile
return { ...state, profile: profileList}
default:
return state;
}
}
export default profileReducer
ACTION:
export const setProfile = (profile) =>({
type: "SET_PROFILE",
payload: {
profile,
}
})
export const getProfile = () => async (dispatch) => {
const token = window.localStorage.getItem("token")
const axiosHeader = {
headers: {
auth:token,
}
}
try{
const response = await axios.get(`${baseURL}/profile`, axiosHeader)
dispatch(setProfile(response.data.user))
}catch{
window.alert("Erro ao capturar profile")
}
}
ESTÁ SENDO IMPRESSO NO CONSOLE. PORÉM NAO CONSIGO REALIZAR UM MAP POR SER UM OBJETO