یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
saeed ghezel arsalan
1 سال پیش توسط saeed ghezel arsalan مطرح شد
1 پاسخ

مشکل در اجرای نقشه mapbox

سلام دوستان. من از پارسی مپ استفاده میکنم . پروژه من با nextjs هست. زمانی که بیلد میگیرم و تو حالت production نقشه به درستی نشون داده میشه ولی زمانی که npm run dev میزنم تو حالت development ارور زیر بهم میده :
setRTLTextPlugin cannot be called multiple times

مشکل اینجاست که تو حالت development چون strict mode فعال هست و useEffect دو بار اجرا میشه .
بدون اینکه strict mode رو غیرفعال کنم کسی راه حلی داره که چطور میتونم یک unmount بنویسم تا مشکلش حل بشه ؟
کد :

useEffect(() => {
    if (mapboxgl.getRTLTextPluginStatus() !== 'loaded') {
      mapboxgl.setRTLTextPlugin('//pasi map api//')
    }
  }, [])

ثبت پرسش جدید
مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

سلام 🖐
امیدوارم حالت خوب و عالی باشی🙏

برای حل این مشکل، می‌تونی از یک تابع داخل useEffect برای تنظیم RTL Text Plugin استفاده کنی و تابع را در زمان unmounting مربوطه حذف کنی . این کار شاید بهت کمک کنه تا از اجراهای تکراری در زمان development mode جلوگیری کنه

اینجا یه نمونه کد و سولوشن برات میزارم ببین چطوری میتونی حلش کنی براساس کد های خود و کاستومشون کنی❤️

import React, { useEffect } from 'react';
import mapboxgl from 'mapbox-gl'; // برای فراخوانی توابع مرتبط با Mapbox

function MapComponent() {
  useEffect(() => {
    // تعریف تابع برای تنظیم RTL Text Plugin
    const setRTLTextPlugin = () => {
      if (mapboxgl.getRTLTextPluginStatus() !== 'loaded') {
        mapboxgl.setRTLTextPlugin('//pasi map api//');
      }
    };

    // اجرای تابع در زمان mount
    setRTLTextPlugin();

    // تابع برای unmount
    return () => {
      // در اینجا ممکن است کارهایی که باید در زمان unmount انجام شود، انجام دهید.
      // به عنوان مثال، از کد زیر برای حذف RTL Text Plugin استفاده می‌شود.
      mapboxgl.setRTLTextPlugin();
    };
  }, []); // آرایه ورودی خالی به منظور اجرای useEffect تنها در زمان mount

  return (
    // کامپوننت نقشه یا کد مرتبط با آن
  );
}

export default MapComponent;

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام