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
    el 4 may. 2020 a las 16:39
  • Listo! Lo anexe 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

Tu Respuesta

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

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