Esta es una publicación traducida por IA.
React - ¿Cómo resolver el error "kakao no está definido"?
- Idioma de escritura: Coreano
- •
-
País de referencia: Todos los países
- •
- Tecnología de la información
0000-00-00 00:00:00
Seleccionar idioma
Texto resumido por la IA durumis
- El problema de que el mapa no se renderice al integrar la API de mapas de Kakao en un entorno create-react-app de React 18 se debe a que los componentes de React no acceden directamente a los objetos globales.
- React evita acceder directamente a objetos globales para lograr la encapsulación, el rendimiento y la gestión del estado, utilizando bibliotecas de gestión de estado centralizadas como Redux para controlar el flujo de datos.
- A diferencia de Vue, React ofrece una sensación de libertad en la estructura de carpetas, los hooks, etc., pero puede resultar desafiante para los desarrolladores principiantes. Se recomienda familiarizarse con React mediante proyectos de prueba.
- Problema
- Solución
- Razón
- Reflexiones
Problema
¡Durante la integración de la API de Kakao Map en un entorno de React 18, create-react-app, el mapa no se renderizó!
Pensé que se cargaría antes de que el navegador se renderizara ya que la etiqueta de script se insertó dentro de la etiqueta de encabezado.
**¡Escribí el código HTML, pero no se ve!**
~ Aproximadamente el código para cargar Kakao Map dentro de la etiqueta de encabezado de index.html ~
<!-- index.html -->
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_API_KEY%&libraries=services,clusterer,drawing" id="map-lib"></script>useEffect(() => {
// cargar mapa Sin embargo, en la consola, solo se registró kakao no está definidoy no se renderizó nada.
Solución
Fundamentos: los componentes de React no acceden directamente a objetos globales.
Solución 1-1
Declare la propiedad kakao del objeto global fuera de la función del componente.
const { kakao } = window;
function Map() {
//...Solución 1-2
Cree un gancho personalizado para las funciones necesarias para renderizar el mapa de Kakao.
//hooks/useKakaoMap.js
const { kakao } = window;
function useKakaoMap() {
const initializeMap = useCallback(() => {
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const newMap = new kakao.maps.Map(container, options);
setMap(newMap);
}, []);
//...
return {
initializeMap
}
}
export default useKakaoMap;
//Map.js
function Map() {
const {
initializeMap,
} = useKakaoMap();
useEffect(() => {
initializeMap();
}, [initializeMap]);
return(
<div id="map"></div>
)
En general, las funciones necesarias para el mapa, como los eventos de arrastre, los eventos de clic y el manejo de marcadores,
en lugar de implementarse dentro del componente,
es mejor separarlas en un gancho personalizado en términos de reutilización y legibilidad.
Razón
Es necesario comprender el concepto de React para comprender por qué React no accede a objetos globales.
1) Encapsulación y modularidad
- Cada componente debe ser independiente y reutilizable. Si dependemos de objetos globales en muchos componentes, perderemos la independencia y nos volveremos muy complejos.
2) Rendimiento y fácil mantenimiento
- React vuelve a renderizar cuando cambia el estado, pero los objetos globales no son adecuados para rastrear los cambios de estado.
3) La administración del estado es centralizada
- Si aún necesita compartir varias variables, use una biblioteca de administración de estado centralizada como Redux.
Centralizado -> Controlar el flujo de datos al componente para evitar errores y facilitar el mantenimiento.
* Renderizado del lado del servidor
Actualmente, el renderizado del lado del servidor se utiliza ampliamente para SEO (optimización de la exposición en los motores de búsqueda), pero el objeto window no se puede acceder desde el lado del servidor.
Reflexiones
Esta fue una prueba y error que encontré mientras realizaba mi primer proyecto de React.
He estado trabajando con vue durante más de 2 años, pero cuando comencé a trabajar en un proyecto de React
¡Me sorprendió mucho no poder mostrar el mapa de Kakao ...!
En comparación con vue, se siente un poco más libre en términos de estructura de carpetas, ganchos, etc., lo que lo hace más difícil.
Pienso mucho en cómo escribirlo de manera eficiente.
Debería aprender más jugando con el proyecto de juguete, como su nombre lo indica.
* Esta es mi primera vez blogueando, y durumis es bastante único y divertido.
También proporciona un resumen de 3 líneas que a los coreanos les encanta, jajaja.
¿Podríamos conocer a desarrolladores extranjeros?
Sería genial si el editor de código se mejorara un poco.
¡Comentarios e ideas son bienvenidos!
¡Que tengas un gran día!
