นี่คือโพสต์ที่แปลด้วย AI
React - แก้ไขปัญหา 'kakao is not defined' ได้อย่างไร
- ภาษาที่เขียน: ภาษาเกาหลี
- •
-
ประเทศอ้างอิง: ทุกประเทศ
- •
- เทคโนโลยีสารสนเทศ
0000-00-00 00:00:00
เลือกภาษา
สรุปโดย AI ของ durumis
- ปัญหาที่เกิดขึ้นในการผสานรวม API ของ Kakao Map ในสภาพแวดล้อมของ create-react-app ใน React 18 ที่แผนที่ไม่แสดงผลเกิดจากส่วนประกอบ React ไม่เข้าถึงวัตถุระดับโลกโดยตรง
- React ไม่เข้าถึงวัตถุระดับโลกโดยตรงเพื่อการแคปซูล ความสามารถในการทำงานและการจัดการสถานะ และใช้ไลบรารีการจัดการสถานะกลาง เช่น Redux เพื่อควบคุมการไหลของข้อมูล
- ต่างจาก vue React ให้ความรู้สึกอิสระในโครงสร้างโฟลเดอร์หรือฮุก แต่สำหรับนักพัฒนาที่เพิ่งเริ่มต้นอาจดูยากและการทำโปรเจ็กต์แบบทอยจะช่วยให้คุ้นเคย
- ปัญหา
- การแก้ไข
- สาเหตุ
- ความรู้สึก
ปัญหา
ระหว่างการผสานรวม API ของ Kakao Map ในสภาพแวดล้อม React 18, create-react-app แผนที่ไม่ได้แสดงผล!
ฉันได้แทรกแท็กสคริปต์ลงในแท็ก head แล้ว ดังนั้นฉันจึงคิดว่าจะโหลดก่อนที่เบราว์เซอร์จะแสดงผล
** ฉันเขียน HTML แล้ว แต่ไม่เห็นเลย!!
~โดยประมาณโค้ดที่เรียกใช้ Kakao Map ในแท็ก head ของ 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(() => {
// โหลดแผนที่ แต่ในคอนโซลมีเพียง kakao ไม่ได้กำหนดเท่านั้นที่บันทึกไว้ ไม่มีอะไรแสดงผล
การแก้ไข
พื้นฐาน: ส่วนประกอบของ React ไม่ได้เข้าถึงวัตถุระดับโลกโดยตรง
ทางออกที่ 1-1
ประกาศแอตทริบิวต์ kakao จากวัตถุระดับโลกนอกฟังก์ชันส่วนประกอบ
const { kakao } = window;
function Map() {
//...ทางออกที่ 1-2
สร้างฟังก์ชันที่จำเป็นในการแสดงผลแผนที่ 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>
)
เหตุการณ์การลาก เหตุการณ์การคลิก การจัดการเครื่องหมาย ฯลฯ โดยทั่วไปแล้วฟังก์ชันที่จำเป็นสำหรับแผนที่
แทนที่จะนำไปใช้ภายในส่วนประกอบ
การแยกออกเป็นฮุคแบบกำหนดเองนั้นดีกว่าในแง่ของการนำกลับมาใช้ใหม่หรือความสามารถในการอ่าน
สาเหตุ
เหตุผลที่ React ไม่ได้เข้าถึงวัตถุระดับโลก - คุณจำเป็นต้องเข้าใจแนวคิดของ React
1) การห่อหุ้มและการเป็นโมดูล
- แต่ละส่วนประกอบควรเป็นอิสระและสามารถนำกลับมาใช้ใหม่ได้ การพึ่งพาวัตถุระดับโลกในส่วนประกอบจำนวนมากจะทำให้สูญเสียความเป็นอิสระและมีความซับซ้อนมาก
2) ประสิทธิภาพและการบำรุงรักษาที่ง่าย
- React จะแสดงผลใหม่เมื่อสถานะเปลี่ยนแปลง วัตถุระดับโลกไม่เหมาะสำหรับการติดตามการเปลี่ยนแปลงสถานะ
3) การจัดการสถานะจากศูนย์กลาง
- อย่างไรก็ตาม หากคุณต้องการแชร์ตัวแปรหลายตัว ให้ใช้ไลบรารีการจัดการสถานะกลาง เช่น Redux
ตรงกลาง -> ควบคุมการไหลของข้อมูลไปยังส่วนประกอบเพื่อหลีกเลี่ยงข้อผิดพลาดและทำให้การบำรุงรักษาง่ายขึ้น
* การแสดงผลแบบเซิร์ฟเวอร์
เมื่อเร็ว ๆ นี้ การแสดงผลแบบเซิร์ฟเวอร์ถูกนำมาใช้กันอย่างแพร่หลายเพื่อการเพิ่มประสิทธิภาพ SEO (Search Engine Optimization) แต่วัตถุ window ไม่สามารถเข้าถึงได้จากเซิร์ฟเวอร์!!
ความรู้สึก
นี่เป็นสิ่งที่ฉันพบในระหว่างโครงการ React แรกของฉัน
ฉันทำงานกับ vue มาเป็นเวลา 2 ปีแล้ว แต่เมื่อฉันเริ่มโครงการ React
ฉันรู้สึกงงมากที่ไม่สามารถแสดง Kakao Map ได้...!!!
vue มีความรู้สึกอิสระมากกว่าในแง่ของโครงสร้างโฟลเดอร์หรือฮุค ทำให้ยากขึ้น
ฉันกำลังคิดว่าจะเขียนอย่างไรให้มีประสิทธิภาพ
ฉันต้องเรียนรู้เพิ่มเติมโดยเล่นกับโครงการแบบของเล่นอย่างที่มันควรจะเป็น
* นี่เป็นบล็อกแรกของฉัน durumis แปลกและสนุกมาก
นอกจากนี้ยังมีสรุป 3 บรรทัดที่ชาวเกาหลีชอบด้วย ㅋㅋ
ฉันคิดว่าฉันอาจพบนักพัฒนาจากต่างประเทศได้
ฉันต้องการให้ปรับปรุงตัวแก้ไขโค้ดเล็กน้อย
ยินดีต้อนรับการแลกเปลี่ยนความคิดเห็นและข้อเสนอแนะ!
ขอให้มีความสุขในวันนี้!
