Salah Eddin Beriani2
-
المساهمات
847 -
تاريخ الانضمام
-
تاريخ آخر زيارة
إجابات الأسئلة
-
إجابة Salah Eddin Beriani2 سؤال في كيفية معرفة عدد جمل SQL التي تم تنفيذها من قِبل Django ORM؟ كانت الإجابة المقبولة
يمكنك ببساطة معرفة الاستعلامات التي قام بها django في جلسة عن طريق
>>> from django.conf import settings >>> settings.DEBUG = True >>> from django.db import connection >>> Model.objects.count() >>> print(len(connection.queries)) 1
-
إجابة Salah Eddin Beriani2 سؤال في كيفية حذف حساب superuser من خلال سطر الأوامر في جانغو Django؟ كانت الإجابة المقبولة
لا يوجد أمر مدمج ولكن يمكنك القيام بذلك بسهولة عبر
> python manage.py shell $ from django.contrib.auth.models import User $ User.objects.get(username="name", is_superuser=True).delete()
-
إجابة Salah Eddin Beriani2 سؤال في كيف اقوم بمعرفة ال current route name باستخدام react navigation ؟ كانت الإجابة المقبولة
يتم تزويد كل مكون شاشة في تطبيقك بعنصر التوجيه تلقائيًا يحتوي على معلومات متنوعة تتعلق بالمسار الحالي وهذا في react-navigation النسخة 6 من المكتبة يمكنك جلب اسم الشاشة ب
function HomeScreen({ route }) { return ( <View> <Text>This is the profile screen of the app</Text> <Text>{route.name}</Text> </View> ); } أو يمكنك استخدام طريقتك لكن في مكون الشاشة وليس في Navigation لأنه ليس داخل navigator
import { useRoute } from '@react-navigation/native'; function HomeScreen() { const route = useRoute(); return ( <View> <Text>This is the profile screen of the app</Text> <Text>{route.name}</Text> </View> ); }
-
إجابة Salah Eddin Beriani2 سؤال في كيفية توليد كلمات المرور عشوائية بشكل آمن في جانغو Django؟ كانت الإجابة المقبولة
يمكن استخدام make_random_password بهذه الطريقة مثلا
for user in users_list: password = User.objects.make_random_password() user.set_password(password) user.save(update_fields=['password']) بهذه الطريقة يمكنك أن تعين لكل مستخدم كلمة سر عشوائية
-
إجابة Salah Eddin Beriani2 سؤال في كيفية رفع الملفات بإستخدام Flask-Restful في فلاسك Flask؟ كانت الإجابة المقبولة
يمكن تحديد مسار مجلد التحميل الافتراضي والحجم الأقصى للملفات التي تم تحميلها في إعدادات التكوين لكائن Flask.
حدد المسار إلى مجلد التحميل
app.config['UPLOAD_FOLDER'] يحدد الحجم الأقصى (بالبايت) للملفات المراد تحميلها
app.config['MAX_CONTENT_PATH'] تحتوي الشفرة التالية على قاعدة عنوان URL "/ upload" التي تعرض’upload.html "في مجلد النماذج وقاعدة عنوان URL" / upload - file "لاستدعاء وظيفة upload لمعالجة عملية التحميل.
يحتوي "upload.html" على زر اختيار ملف وزر إرسال.
<html> <body> <form action = "http://localhost:5000/uploader" method = "POST" enctype = "multipart/form-data"> <input type = "file" name = "file" /> <input type = "submit"/> </form> </body> </html> بمجرد تحديد ملف ، انقر فوق إرسال. تستدعي طريقة نشر النموذج عنوان URL "/ upload_file". ينفذ برنامج تحميل الوظيفة uploader عملية حفظ.
كود Python لتطبيق Flask.
from flask import Flask, render_template, request from werkzeug import secure_filename app = Flask(__name__) @app.route('/upload') def upload_file(): return render_template('upload.html') @app.route('/uploader', methods = ['GET', 'POST']) def upload_file(): if request.method == 'POST': f = request.files['file'] f.save(secure_filename(f.filename)) return 'file uploaded successfully' if __name__ == '__main__': app.run(debug = True)
-
إجابة Salah Eddin Beriani2 سؤال في خطأ Method Not Allowed في فلاسك Flask كانت الإجابة المقبولة
الخطأ ربما يكون صادر من هنا
@app.route('/my-form') def my_form(): posts = [] for post in session.query(models.Post): posts.append((post.title, post.content)) return render_template('posts.html', posts=posts) جرب اضافة methods في app.route
@app.route('/my-form', methods=['GET', 'POST']) def my_form(): posts = [] for post in session.query(models.Post): posts.append((post.title, post.content)) return render_template('posts.html', posts=posts)
-
إجابة Salah Eddin Beriani2 سؤال في خطأ عند استخدام Mongoose و Multer لرفع عدة صور على NodeJS كانت الإجابة المقبولة
للعثور على الحل في الغالب انت فقط تحتاج لبعض ال console.logs
const storage = multer.diskStorage({ destination: function (req, file, cb) { const isValid = FILE_TYPE_MAP[file.mimetype]; let uploadError = new Error("invalid image type"); if (isValid) { uploadError = null; } cb(uploadError, "public/uploads"); }, filename: function (req, file, cb) { const fileName = file.originalname.split(" ").join("-"); console.log(filename) // تحقق هنا const extension = FILE_TYPE_MAP[file.mimetype]; cb(null, `${fileName}-${Date.now()}.${extension}`); }, }); وأيضا
router.put( "/gallery-images/:id", uploadOptions.array("images", 10), // الاسم هنا مهم ويجب أن يستعمل في الواجهة async (req, res) => { const files = req.files; let imagesPaths = []; const basePath = `${req.protocol}://${req.get("host")}/public/uploads/`; console.log("basePath",basePath)// تحقق هنا if (files) { files.map((file) => { imagesPaths.push(`${basePath}${file.filename}`); }); } console.log("imagesPaths",imagesPaths)// تحقق هنا console.log("req.params.id",req.params.id)// تحقق هنا const product = await ProductModel.findByIdAndUpdate( req.params.id, { images: imagesPaths, }, { new: true } ); if (!product) return res.status(500).send("the gallery cannot be updated!"); res.send(product); } ); تحقق أيضا من ال model الخاص بك ProductModel
-
إجابة Salah Eddin Beriani2 سؤال في كيفية تغيير صلاحيات المجلدات من داخل DockerFile كانت الإجابة المقبولة
تسمح لك تعليمات RUN بتثبيت التطبيقات والحزم المطلوبة وتنفذ الاوامر في طبقة عالية على الصورة المشأة و غالبًا ما ستجد تعليمات RUN متعددة في Dockerfile.
تعليمات CMD تسمح لك بتعيين أمر افتراضي والذي سيتم تنفيذه فقط عند تشغيل الحاوية دون تحديد أم إذا تم تشغيل حاوية Docker بأمر فسيتم تجاهل الأمر الافتراضي إذا كان Dockerfile يحتوي على أكثر من تعليمة CMD فسيتم تجاهل تعليمات CMD.
لذا الحل هو أن تستعمل run في هذه الحالة بدل cmd
-
إجابة Salah Eddin Beriani2 سؤال في كيفية استضافة موقع flutter web على IIS؟ كانت الإجابة المقبولة
الأمر جدًا بسيط فقط قم بعمل compile لمشروعك
flutter build web ستحصل على مجلد build داخله مجلد web
/build/web قم بنسخ المجلد الى خادم IIS في مجلد website و هذا كل شئ
-
إجابة Salah Eddin Beriani2 سؤال في أريد أن أضيف دور أدمن فى هذا الكود node js كانت الإجابة المقبولة
في حالتك يمكن ان يكون استخدام jsonwebtoken مع express-jwt-permissions خيار افضل حيث تكون الشيفرة كالتالي
import * as jwt from 'jsonwebtoken'; authenticate(req, res, next) { const payload = { name: 'John', surname: 'Smith', username: 'john.smith', permissions: ['USER', 'ADMIN',"VENDOR"], }; const options = { expiresIn: Number(process.env.JWT_TTL), }; const token = jwt.sign(payload, process.env.JWT_SECRET, options); res.status(201).send({ token }); } ثم يمكنك التحقق في المسارات متى تحتاج كل نوع
const guard = require("express-jwt-permissions")(); // all user routes routes.use('/api', guard.check('USER')); // ... // all admin routes routes.use('/api/admin/', guard.check('ADMIN')); // ... قم بالقراءة قليلا حول استخدام jsonwebtoken مع express اما عن استخدام express-jwt-permissions فهو مباشر
-
إجابة Salah Eddin Beriani2 سؤال في إضافة المفتاح الخاص إلى Github Actions Workflow كانت الإجابة المقبولة
في المقال الذي اتبعته لو ترجع لتلك الخطوة هناك ارشادات منه بعدم انشاء كلمة سر لانو الaction مبنية ما تقبل كلمة سر
-
إجابة Salah Eddin Beriani2 سؤال في كيفية إعداد النسخ الاحتياطي باستخدام tar كانت الإجابة المقبولة
tar بالاستعانة ب gzip و bzip2 يمكنك من إنشاء أرشيف مضغوط أ فك الضغط عن ارشيف مضغوط
tar -cvf books.tar /home/books/ الامر فوق يقوم بانشاء أرشيف tar لكنه ليس مضغوط يقوم بانشاء أرشيف من كل الملفات الموجودة في مجلد books و c هي لانشاء الأرشيف و v لنرى تقدم العملية و f لاسم الأرشيف
و لضغط ذلك الأرشيف الى tgz نحتاج الى gzip ويجب أن يكون مثبت في ال system
tar -zcvf books.tgz /home/books/ الفرق الوحيد هنا هو z وهي للضغط ب gzip ونفس العملية اذا أخذنا الأرشيف من الأمر الأول في الحقيقة يمكنه ضغطه مباشرة ب gzip
gzip books.tar ولكن tar يقوم بهذا تلقائيا عبر العلم z
يمكنك ايضا فك الضغط عن أرشيف مضغوط tgz
tar -zxvf books.tgz x هنا هي لفك الضغط عن طريق gzip وكل هذا يطبق تقريبا بنفس الطريقة لو استعملت bzip2
-
إجابة Salah Eddin Beriani2 سؤال في ما الفرق بين بروتوكولي HTTP و HTTPS ولماذا نستخدم كل منهم؟؟ كانت الإجابة المقبولة
هناك اختلافات كثيرة بين http و https منها
بالنسبة للأمان
http : إنه أقل أمانًا حيث يمكن أن تكون البيانات عرضة للقراصنة.
https :إنه مصمم لمنع المتسللين من الوصول إلى المعلومات الهامة لذا فهو آمن ضد مثل هذه الهجمات.
بالنسبة للمنفذ
http : يستخدم المنفذ 80 بشكل افتراضي
https: يستخدم المنفذ 443 بشكل افتراضي.
بالنسبة للرابط
http :تبدأ عناوين HTTP URL بـ http://
https: تبدأ عناوين HTTPS URL بـ https: //
بالنسبة للاستخدامات
http : إنه مناسب تمامًا لمواقع الويب المصممة لاستهلاك المعلومات مثل المدونات.
https : إذا احتاج موقع الويب إلى جمع المعلومات الخاصة مثل رقم بطاقة الائتمان فهو بروتوكول أكثر أمانًا.
بالنسبة للتحقق من صحة اسم المجال
http: موقع HTTP لا يحتاج إلى SSL.
https : يتطلب HTTPS شهادة SSL.
بالنسبة لترتيب البحث في محركات البحث
http : لا يحسن HTTP تصنيفات البحث.
https: يساعد HTTPS في تحسين ترتيب البحث.
بالنسبة للسرعة
http : سرعة عالية
https: أقل سرعة من http
-
إجابة Salah Eddin Beriani2 سؤال في بناء مشروع nextjs في خادم ubuntu 20.4 يفشل كانت الإجابة المقبولة
اذا كان ال build يعمل معك في السابق دون مشاكل في vps واذا كان ال build الجديد يعمل محليا ولا يعمل في vps server فأغلب الظن يذهب الى أن ram المتوفرة في vps لم تعد تكفي لبناء المشروع والحل ببساطة هو زيادة ال ram في ال vps الخاص بك
-
إجابة Salah Eddin Beriani2 سؤال في كيف أقوم بعملية رفع مشروع ريأكت React على الاستضافة وماهي الأمور التي يجب أن أتأكد منها كانت الإجابة المقبولة
يمكنك رفع مشروع react ببضع نقرات عن طريق vercel
أولا قم برفع المشروع على github ثم قم بالتسجيل في موقع vercel بحساب ال github الخاص بك ثم اضغط على new project واختر المستودع الخاص بك واضغط على import وبعد لحظات سيكون مرفوعا ويمكنك زيارته وستجده في vercel dashboard وبالضغط عليه ستجد setting الخاصة به من هناك يمكنك اظافة متغيرات البيئة و اظافة دومين وكما أنك ايضا ستتمتع ب CI أي عندما تقوم ب PUSH للمستودع يتم بناء والرفع من جديد هناك تلقائيا
-
إجابة Salah Eddin Beriani2 سؤال في لماذا استخدم __dirname مع path.resolve في تكوين webpack؟ كانت الإجابة المقبولة
في العادة __dirname تقوم بارجاع رابط المجلد لل module دعنا نلقي نظرة على بعض الأكواد التي تستخدم __dirname.
//getDirName.js function getDirName() { return __dirname; } module.exports = getDirName; //app.js const getDirName = require('./getDirName'); console.log(getDirName()); هذا ما يبدو عليه الإخراج بدون استخدام webpack
/users/usename/folder.../webapckproject لكن عند استخدام webapck
//getDirName.js function getDirName() { return __dirname; } export default getDirName; //app.js import getDirName from './getDirName'; console.log(getDirName()); الناتج يصبح
/ لاحظ كيف يختلف __dirname اعتمادًا على ما إذا كنت تستخدم webapck أم لا. وذلك لأن webapck تستبدل __dirname بـ /. إنه أمر افتراضي غريب وقد يتسبب في بعض الأخطاء التي يصعب العثور عليها كما يقوم بهذا أيضًا باستخدام __filename.
لجعل __dirname يعمل بنفس الطريقة عند تجميعه بواسطة webapck يمكننا تحديث تكوين webpack الخاص بنا على هذا النحو.
const path = require('path'); module.exports = { entry: path.resolve(__dirname, './app.js'), output: { path: path.join(__dirname), filename: 'bundle.js', }, node: { __dirname: false, }, };
-
إجابة Salah Eddin Beriani2 سؤال في تحميل إعدادات json باستخدام Webpack لبيئات مختلفة كانت الإجابة المقبولة
يمكنك استخدام المكتبة المساعدة dotenv
// webpack.config.js const Dotenv = require('dotenv-webpack'); module.exports = { ... plugins: [ new Dotenv() ] ... }; لتحميل ملف على أساس البيئة ، يمكنك الاستفادة من process.env.NODE_ENV
// webpack.config.js const Dotenv = require('dotenv-webpack'); const env = process.env.NODE_ENV; module.exports = { ... plugins: [ new Dotenv({ path: `./.env.${env === "production" ? "prd" : "dev"}`, }) ] ... };
-
إجابة Salah Eddin Beriani2 سؤال في إعداد axios instance في next.js كانت الإجابة المقبولة
جرب استخدام process.browser محل window
import axios from 'axios'; const Axios = axios.create({ baseURL: process.env.NEXT_PUBLIC_API, }); let token; if (process.browser) { token = JSON.parse(localStorage.getItem('zu')).state?.auth?.token; } Axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; export default Axios;
-
إجابة Salah Eddin Beriani2 سؤال في Next.js عدة ملفات .env كانت الإجابة المقبولة
يمكن الاستبدال بينهما عن طريق المكتبة env-cmd بافتراض أنه لديك كما قلت .env.local
"scripts": { "dev": "next dev -p 3001", "build": "next build", "build:local": "env-cmd -f .env.local yarn build && yarn start "start": "next start", "export": "npm run build && next export" }, تمت اضافة build:local عند تشغيله next سيقوم بالبناء باستعمال env.local
-
إجابة Salah Eddin Beriani2 سؤال في ظهور خطأ window is not defined في احدى صفحات nextjs كانت الإجابة المقبولة
المشكلة تكمن في التحديد في هذه المكتبة
import {Editor} from "react-draft-wysiwyg" الشيفرة الداخلية لهذه المكتبة تستخدم window وبالتالي عند يشتغل المكون في جانب الخادم ستحمل هذه الشيفرة ويحدث الخطأ هناك نظرا لأن window لا تتواجد في جانب الخادم والحل ببساطة لهذه المكتبة أو كل المكتبات التي تعول على window هو بعدم السماح للمكتبات بالتحميل في جانب الخادم عن طريق الاستيراد الديناميكي مع اضافة خيار تعطيل الاستيراد في server side rendering هذا سيصلح المشكلة
const Editor = dynamic( () => { return import('react-draft-wysiwyg').then((mod) => mod.Editor); }, { ssr: false } );
-
إجابة Salah Eddin Beriani2 سؤال في كيفية عرض اجابة متغيرة عن طريق Alert في React native كانت الإجابة المقبولة
نعم لقد نظرت لquestionHOlder ووجدت انه array لذا لا يمكنك فعل ذلك سيتحتم عليك معرفة index الخاص بالسؤال ليمكنك جلب السؤال ثم الاكمال يعني هكذا
[0]QustionHolder مثلا هو السؤال الاول
[1]QustionHolder هو السؤال الثاني
أنت الآن لابد أنه لديك طريقة لمعرفة ذلك الرقم استخدمه لجلب السؤال وبعدها سيمكنك الدخول الإجابات وفلترتها وسيكون هذا التغيير الأخير في الشيفرة التي كتبتها
-
إجابة Salah Eddin Beriani2 سؤال في react seo مشاكل عند مشاركة الروابط كانت الإجابة المقبولة
هذا من الأسباب التي أدت لظهور شيء مثل nextjs واذا أردت كل ميزات ال seo فيمكنك أن تحول التطبيق الى nextjs وستتمتع هناك بكل ميزات ال seo اذا كان هذا يعتبر خيار مكلفا لك فيمكنك استخدام الخيار الثاني وهو انشاء custom server و عمل الserver side rendering بنفسك و ايتاح react app عن طريق server ةهذا مثال ملائم جدا في حالتك
أولا ضع placeholders في index.html داخل مجلد public
<head> ... <meta name="description" content="__META_DESCRIPTION__"/> <meta name="og:title" content="__META_OG_TITLE__"/> <meta name="og:description" content="__META_OG_DESCRIPTION__"/> <meta name="og:image" content="__META_OG_IMAGE__"/> ... </head> ثم ستملأ ال placeholders في ال custom server وهكذا حلت مشكلتك كليا
const path = require('path'); const fs = require("fs"); const app = express(); const PORT = process.env.PORT || 3000; const indexPath = path.resolve(__dirname, '..', 'build', 'index.html'); // ايتاح المصادر الثابتة app.use(express.static( path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }, )); app.get('/*', (req, res, next) => { fs.readFile(indexPath, 'utf8', (err, htmlData) => { if (err) { console.error('Error during file reading', err); return res.status(404).end() } // المعرف من الرابط مثلا const postId = req.query.id; const post = axios(....postId);//هذا لجلب المعلومات if(!post) return res.status(404).send("Post not found"); // inject meta tags htmlData = htmlData.replace( "<title>React App</title>", `<title>${post.title}</title>` ) .replace('__META_OG_TITLE__', post.title) .replace('__META_OG_DESCRIPTION__', post.description) .replace('__META_DESCRIPTION__', post.description) .replace('__META_OG_IMAGE__', post.thumbnail) return res.send(htmlData); }); }); // listening... app.listen(PORT, (error) => { if (error) { return console.log('Error during app startup', error); } console.log("listening on " + PORT + "..."); });
-
إجابة Salah Eddin Beriani2 سؤال في مشكلة في مكون ال head في nextjs كانت الإجابة المقبولة
هذه المشكلة من المشكلات التي تعبر جيدا عن معنى server side rendering بحيث أنك وضعا شرطا يتوفر الا في client وهذا الشرط هو تواجد ال data ووضعت ال head داخل ذلك و data لن تكون متوفرة في server side rendering وبالتالي أنت لن تحصل على معلومات داخل ال head والطريقة لاصلاح ذلك هي فقط بعدم وضع أي شرط للشيفرة التي ينبغي لها أن تشتغل في server
{data ? ( <> <Head> <title>{book?.title}</title> <meta name="title" content={book?.title} /> <meta name="description" content={book?.description} /> <meta property="og:title" content={book?.title} /> <meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} /> <meta property="og:type" content="book" /> <meta property="og:description" content={book?.description} /> <meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} /> </Head> بدل وضع head داخل الشرط لتواجد data نخرجها لتكون ليست مقيدة بذلك الشرط
<Head> <title>{book?.title}</title> <meta name="title" content={book?.title} /> <meta name="description" content={book?.description} /> <meta property="og:title" content={book?.title} /> <meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} /> <meta property="og:type" content="book" /> <meta property="og:description" content={book?.description} /> <meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} /> </Head> {data ? ( ..... )
-
إجابة Salah Eddin Beriani2 سؤال في كيف أحول هذا الكود من class component الى function component ؟ كانت الإجابة المقبولة
الجزء الأول في التغيير سيكون بسيط وكالتالي
export default function Example() { const start = ([]) => { setState({ dragging: true }); }; const moving = ([y, circleY]) => { setState({ y }); }; const done = ([]) => { setState({ dragging: false }); }; return ( <SafeAreaView style={styles.container}> <Text>y: {state.y}</Text> <Animated.Code> {() => cond(eq(gestureState, State.BEGAN), call([], start))} </Animated.Code> <Animated.Code> {() => cond( eq(gestureState, State.ACTIVE), call([absoluteY, circleY], moving) ) } </Animated.Code> <Animated.Code> {() => cond( or( eq(gestureState, State.END), eq(gestureState, State.FAILED), eq(gestureState, State.CANCELLED) ), call([], done) ) } </Animated.Code> {state.dragging && <Animated.View style={[styles.box, { top: circleY }]} />} <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent} onHandlerStateChange={onGestureEvent} > <Animated.View style={[ // styles.box, { top: absoluteY, }, ]} > <Text>hello</Text> </Animated.View> </PanGestureHandler> </SafeAreaView> ); } أما الجزء الثاني فسيكون مقسم ولنبدأ بأبسط شئ وهو انشاء ال state وتغيير هذا الجزء
this.state = { dragging: false, y: 0 }; الى
const [state, setState] = React.useState({ dragging: false, y: 0 }) أما هذا الجزء يمكنك أن تضعه في state واحدة
this.dragX = new Value(0); this.dragY = new Value(0); this.absoluteY = new Value(100); this.offsetX = new Value(width / 2); this.offsetY = new Value(100); this.gestureState = new Value(-1); this.onGestureEvent = event([ { nativeEvent: { state: this.gestureState, absoluteY: this.absoluteY, }, }, ]); this.circleY = add(this.absoluteY, new Value(200)); const [info, setInfo] = React.useState({ dragX: new Value(0), dragY: new Value(0), absoluteY: new Value(100), offsetX: new Value(width / 2), offsetY: new Value(100), gestureState: new Value(-1), onGestureEvent: event([ { nativeEvent: { state: new Value(-1), absoluteY: new Value(100), }, }, ]), circleY: add(new Value(100), new Value(200)), }); وفي المجمل المكون سيكون هكذا
import React from 'react'; import { StyleSheet, View, Dimensions, Text, SafeAreaView, } from 'react-native'; import Animated from 'react-native-reanimated'; import { PanGestureHandler, State } from 'react-native-gesture-handler'; const { width } = Dimensions.get('window'); const { cond, eq, add, call, set, Value, event, or, } = Animated; export default function Example() { const [state, setState] = React.useState({ dragging: false, y: 0 }); const [info, setInfo] = React.useState({ dragX: new Value(0), dragY: new Value(0), absoluteY: new Value(100), offsetX: new Value(width / 2), offsetY: new Value(100), gestureState: new Value(-1), onGestureEvent: event([ { nativeEvent: { state: new Value(-1), absoluteY: new Value(100), }, }, ]), circleY: add(new Value(100), new Value(200)), }); const start = ([]) => { setState({ dragging: true }); }; const moving = ([y, circleY]) => { setState({ y }); }; const done = ([]) => { setState({ dragging: false }); }; return ( <SafeAreaView style={styles.container}> <Text>y: {state.y}</Text> <Animated.Code>{() => cond(eq(info.gestureState, State.BEGAN), call([], start))}</Animated.Code> <Animated.Code> {() => cond(eq(info.gestureState, State.ACTIVE), call([info.absoluteY, info.circleY], moving))} </Animated.Code> <Animated.Code> {() => cond( or( eq(info.gestureState, State.END), eq(info.gestureState, State.FAILED), eq(info.gestureState, State.CANCELLED), ), call([], done), ) } </Animated.Code> {state.dragging && <Animated.View style={[styles.box, { top: info.circleY }]} />} <PanGestureHandler maxPointers={1} onGestureEvent={info.onGestureEvent} onHandlerStateChange={info.onGestureEvent} > <Animated.View style={[ // styles.box, { top: info.absoluteY, }, ]} > <Text>hello</Text> </Animated.View> </PanGestureHandler> </SafeAreaView> ); }
-
إجابة Salah Eddin Beriani2 سؤال في too many renders كانت الإجابة المقبولة
لقد قمت بأنشاء حلقة متكررة لا متناهية جعلت المكون في حالة تشغيل بلا توقف وهذا بسبب سوء استخدام useeffect في حالتك لأنه يوجد عدة طرق لاستخدام useeffect والاولى هي
useEffect(() => { ... }); في الاستخدام فوق useeffect ستشتغل عند كل تغيير لأي حالة مرتبطة بالمكون والحالة الثانية هي
useEffect(() => { ... }, []); إضافة قائمة المعايير وتركها فارغة يعني أن useeffetc ستشتغل مرة واحدة وهي عندما يركب المكون ال dom أما الحالة الثالثة وهي اضافة معيار لقائمة المعايير
const [label,setLabel]=useState(""); useEffect(() => { .... }, [label]); وهذه الحالة تخبر useeffect أن تشتغل فقط في حالة تغير المعيار المضمن في قائمة المعايير والان وقد تكلمنا عن الحالات الثلاثة ستجد أن الاستخدام المناسب لك هو الحالة الثانية