0

Tengo dos componentes a los cuales les mando datos por medio del useEffect, pero cuando uno de ellos cambia, me recarga todos los componentes y quiero evitar eso.

¿Cómo puedo hacerlo? La parte que más me interesa es que no me recargue el mapa, debido a que es otro componente.

Anexo código

import React, { useState, useEffect } from "react";
import Card from "react-bootstrap/Card";
import GoogleMapReact from "google-map-react";

import "./agency-detail-group.scss";

function AgencyDetailGroup(props) {
  const [agency, setAgency] = useState(props.agency);
  const defaultZoom = 12;

  useEffect(() => {
    setAgency(props.agency);
  }, [props]);

  const MapComp = (props) => {
    if (!props.location) {
      return null;
    }
    return (
      <Card className="google-card">
        <GoogleMapReact
          bootstrapURLKeys={{
            key: "AIzaSyDpiR1qDLtWRG3NVz3jmzl4tAHmCImQx7c",
          }}
          defaultCenter={props.location}
          defaultZoom={defaultZoom}
        />
      </Card>
    );
  };

  return (
    <div className="address-info-container">
      <Card className="address-card">
        <div className="address-card-title underlined">{agency.name}</div>
        <div>{agency.address}</div>
        <div className="address-card-title">Horario de atención</div>
        <div>{agency.business_hours}</div>
        <div className="address-card-title">Teléfono</div>
        <div>{agency.phone}</div>
      </Card>
      <MapComp location={agency.location} />
    </div>
  );
}

export default AgencyDetailGroup;
2
  • Podrias compartir tu codigo, para tener la idea de tu problema mas clara
    – Isaac
    Commented el 4 may. 2020 a las 16:39
  • Listo! Lo anexe Commented el 4 may. 2020 a las 17:12

1 respuesta 1

0

En primera, no necesitas tener tu component MapCom dentro de tu otro componente AgencyDetailGroup. Y tambien podrias usar memo en MapCom para que solo haga otro render cuando sus props cambien. En tu useEffect podrias poner como dependencia que ese efecto se haga solo cuando props.agency cambie y no todoso los props.

import React, { useState, useEffect, memo } from "react";
    import Card from "react-bootstrap/Card";
    import GoogleMapReact from "google-map-react";

    import "./agency-detail-group.scss";

      const MapComp = memp((props) => {
        if (!props.location) {
      return null;
    }
    return (
      <Card className="google-card">
        <GoogleMapReact
          bootstrapURLKeys={{
            key: "AIzaSyDpiR1qDLtWRG3NVz3jmzl4tAHmCImQx7c",
          }}
          defaultCenter={props.location}
          defaultZoom={defaultZoom}
        />
      </Card>
    );
  });

function AgencyDetailGroup(props) {
  const [agency, setAgency] = useState(props.agency);
  const defaultZoom = 12;

  useEffect(() => {
    setAgency(props.agency);
  }, [props.agency]);

  return (
    <div className="address-info-container">
      <Card className="address-card">
        <div className="address-card-title underlined">{agency.name}</div>
        <div>{agency.address}</div>
        <div className="address-card-title">Horario de atención</div>
        <div>{agency.business_hours}</div>
        <div className="address-card-title">Teléfono</div>
        <div>{agency.phone}</div>
      </Card>
      <MapComp location={agency.location} />
    </div>
  );
}

export default AgencyDetailGroup;
1
  • Me funciono perfecto ese cambio!! Commented el 5 may. 2020 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.