اذهب إلى المحتوى
  • 0

مشكلة ايقاف للـ interval في React Native

عمر سالم2

السؤال

import React from 'react';
import { Text, View } from 'react-native';

const useTypewriter = ({ text, time }) => {
	const [typewriter, setTypewriter] = React.useState('');
	const [index, setIndex] = React.useState(0);

	React.useEffect(() => {
		const interval = setInterval(() => {
			if (index == text.length) {
				clearInterval(interval);
			}

			setTypewriter(typewriter + text[index]);
			setIndex(index + 1);
		}, time);

		// قم بالمسح في حالة قام المكون بالخروج في وقت باكر
		return () => clearInterval(interval);
	}, [typewriter, index]);

	return typewriter;
};

function App() {
	const typewriter = useTypewriter({
		text: 'Welcome!',
		time: 200
	});

	return (
		<View style={{ padding: '20px' }}>
			<Text style={{ fontSize: '22px' }}>{typewriter}</Text>
		</View>
	);
}

أحاول إنشاء كاتبه لتكتب احرف الكلمة حرف بحرف، ولكنها لا تتوقف..

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الخطأ لديك فقط هو أنك لم تكتب كلمة return هنا 

if (index == text.length) {
  return clearInterval(interval); // حيث تقول عند تحقق الشرط أريد أن أقوم بإنها التحديث ولا يتم تنفيذ شيئ بعد هذا السطر
}

لكن بدون return ستنتهي بالفعل الحلقة وسيتم تنفيذ الآتي 

setTypewriter(typewriter + text[index]);
setIndex(index + 1);

مما سيؤدي إلى تنفيذ ال useEffect مرة أخرى.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...