Questo è un post tradotto da IA.
React - kakao non definito: come risolverlo
- Lingua di scrittura: Coreana
- •
-
Paese di riferimento: Tutti i paesi
- •
- Tecnologia dell'informazione
0000-00-00 00:00:00
Seleziona la lingua
Testo riassunto dall'intelligenza artificiale durumis
- Il problema che si verifica quando si integra l'API di Kakao Map in un ambiente React 18 con create-react-app, che impedisce il rendering della mappa, è dovuto al fatto che i componenti React non accedono direttamente agli oggetti globali.
- React evita l'accesso diretto agli oggetti globali per motivi di incapsulamento, prestazioni e gestione dello stato, e utilizza librerie di gestione dello stato centralizzato come Redux per controllare il flusso dei dati.
- A differenza di Vue, React offre una sensazione di libertà nella struttura delle cartelle, negli hook e in altre aree, ma può essere difficile per i sviluppatori alle prime armi. È una buona idea familiarizzare con React attraverso progetti giocattolo.
- Problema
- Soluzione
- Motivo
- Riflessioni
Problema
Durante l'integrazione dell'API di Kakao Map in un ambiente React 18, create-react-app, la mappa non è stata renderizzata!
Ho inserito il tag script all'interno del tag head, quindi pensavo che sarebbe stato caricato prima che il browser lo renderizzasse.
**Ho scritto l'HTML ma non si vede!!**
~qualcosa come il codice per caricare Kakao Map all'interno del tag head di 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(() => {
// map 불러오기 Tuttavia, nella console è stato registrato solokakao non è definitoe non è stato renderizzato nulla.
Soluzione
Fondamenti: i componenti React non accedono direttamente agli oggetti globali.
Soluzione 1-1
Dichiarare l'attributo kakao dall'oggetto globale al di fuori della funzione del componente.
const { kakao } = window;
function Map() {
//...Soluzione 1-2
Creare hook personalizzati per le funzioni necessarie per il rendering di Kakao Map.
//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>
)
Eventi di trascinamento, eventi di clic, gestione dei marker, ecc., ovvero le funzionalità normalmente necessarie per la mappa,
sono generalmente implementate all'interno del componente,
ma è meglio separarle in hook personalizzati per migliorare la riutilizzabilità e la leggibilità.
Motivo
Il motivo per cui React non accede agli oggetti globali: è necessario comprendere il concetto di React.
1) Incapsulamento e modularità
- Ogni componente deve essere indipendente e riutilizzabile. Se si fa affidamento su oggetti globali in numerosi componenti, si perde l'indipendenza e la complessità aumenta.
2) Prestazioni e facilità di manutenzione
- React ri-renderizza quando lo stato cambia, ma gli oggetti globali non sono adatti al monitoraggio dei cambiamenti di stato.
3) Gestione dello stato centralizzata
- Se è necessario condividere diverse variabili, utilizzare librerie di gestione dello stato centralizzate come Redux.
Centro -> si controlla il flusso dei dati verso i componenti per evitare errori e semplificare la manutenzione.
* Rendering lato server
Recentemente, il rendering lato server è diventato sempre più popolare per la SEO (ottimizzazione per i motori di ricerca), ma l'oggetto window non è accessibile sul lato server!!
Riflessioni
Questo è un problema che ho incontrato durante il mio primo progetto React.
Ho lavorato con Vue per oltre 2 anni, ma all'inizio del mio progetto React,
sono rimasto piuttosto sorpreso di non riuscire a visualizzare Kakao Map...!!!
Rispetto a Vue, la struttura delle cartelle e gli hook sono un po' più liberamente definiti, il che rende le cose più difficili.
Mi chiedo spesso quale sia il modo più efficiente per scriverlo.
Dovrò imparare di più giocando con questo progetto di giocattolo.
* Questo è il mio primo blog, ma durumis è piuttosto unico e divertente.
Fornisce anche un riepilogo di 3 righe che piace agli utenti coreani ㅋㅋ
Potrei anche incontrare sviluppatori stranieri?
L'editor di codice potrebbe essere migliorato.
Sono aperte a discussioni e critiche~!
Spero che tu abbia una buona giornata!
