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

معالجة تطابق البيانات في ريآكت

محمود سعداوي2

السؤال

السلام عليكم.

في المكود التالي:

const [dummyTransactions,setDummyTransactions] = useState([])
  const [validate,setValidate] = useState(false)
  const [errorText,setErrorText] = useState("")
  const [errorAmount,setErrorAmount] = useState("")

const addNewTransaction = () => {
  if (text.length === 0 && amount.length === 0) {
    setErrorText("Please Enter A text")
    setErrorAmount("Please enter An Amount")
    setValidate(true)
  } else if(amount.length === 0 && text.length !== 0 ) {
    setErrorAmount("Please enter An Amount")
    setValidate(true)
  } else if(text.length === 0 && amount.length !== 0) {
    setErrorText("Please Enter A text")
    setValidate(true)
  } else {
    setDummyTransactions([...dummyTransactions,{id: new Date(), text: text, amount: +amount}])
    setAmount('')
    setText('')
    setValidate(false)
  }
}

الكود يعمل بشكل جيد من المرة الأولى و رسالة الخطأ تظهر بالطريقة المناسبة.

المشكل هو أني إذا تطابقت البيانات في الأول ثم نسيت مثلا المبلغ و كتبت النص فإن رسالة الخطأ تظهر أنه علي كتابة النص و المبلغ

Capture.JPG.e3b6ee90593fa8a19dfcc1c2fad2b845.JPG

شكرا على المساعدة

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

Recommended Posts

  • 0

 المشكلة في الشرط الثاني في دالة addNewTransaction()، حيث أنه يتم التحقق فقط من طول النص وليس من طول المبلغ، مما يعني أنه إذا تم إدخال نص ونسي المبلغ، فإنه سيتم تمرير الشرط الثاني وإظهار رسالة الخطأ الأخيرة.

يمكنك حل هذه المشكلة عن طريق إضافة التحقق من طول المبلغ في الشرط الثاني، مثل هذا:

const addNewTransaction = () => {
  if (text.length === 0 && amount.length === 0) {
    setErrorText("Please Enter A text")
    setErrorAmount("Please enter An Amount")
    setValidate(true)
  } else if(amount.length === 0 && text.length !== 0 ) {
    setErrorAmount("Please enter An Amount")
    setValidate(true)
  } else if(text.length !== 0 && amount.length === 0) {
    setErrorText("Please Enter A text")
    setValidate(true)
  } else {
    setDummyTransactions([...dummyTransactions,{id: new Date(), text: text, amount: +amount}])
    setAmount('')
    setText('')
    setValidate(false)
  }
}

بهذا الشكل، سيتم التحقق من طول المبلغ في الشرط الثاني وإذا كان المبلغ غير موجود، سيتم عرض رسالة الخطأ المناسبة وعكس الحال إذا تم إدخال المبلغ ونسي النص.

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...