2
respostas

Função map dando dando erro

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

2 respostas

Boa tarde, Lucas! Como vai?

O map() só pode ser utilizado com arrays. Ou vc coloca o seu objeto num array, ou se não for possível fazer isso, vc terá que utilizar outro método que atenda ao que vc quer fazer dentro de sua lógica.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Lucas, boa tarde!

É um objeto com um array de objetos dentro, ou já com os dados que você precisa? Se for o segundo caso não tem o porquê você fazer o map, basta você mostrar as informações do objeto, tenha um array de objetos dentro, você irá precisar converter esse objeto em um array, você pode fazer uma implementação parecida com essa:

var array = Object.keys(obj).map(function (key) { 
        return [Number(key), obj[key]]; 
});  

Veja mais em: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Espero ter ajudado e bons estudos!