• 0

زيادة عدد الإعجابات دون تحديث الصفحة بـ React js

عندي <li> أعرض بداخلها قيمة الاعجابات التي أقرأها من الdatabase و اضعها في state و لكن عند الضغظ على "اعجاب" يزيد اللايك في قاعدة البينات و  يجب تحديث الصفحة من اجل اظهار الرقم الجديد

هل هُناك حل لأُري المستخدم ان عدد الاعجاب يزيد فور ضغطه على " إعجاب" ؟

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

يمكنك أن تقوم بزيادة عدد الإعجاب بقيمة واحد عند إتمام الطلب إلى الخادم، كالتالي:
 

this.setState((prevState, props) => ({
    likes: prevState.likes + 1
})); 

وبالتالي يوف يزداد عدد الإعجابات في الصفحة دون الحاجة إلى إعادة تحديث الصفحة.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

حسنا قد يكون لديك زر يحمل عدد اللايكات الحالية وعند ضغطه يزيد عدد اللايكات يمكنك تطبيق ش مشابه وهذا سيعطيك النتيجة المرادة 

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function App() {
  const [likes, setLikes] = useState(8);

  const updateLikes = async () => {
    try {
      const res = await axios.post('/api/likes');
      setLikes(res.data.likes);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div>
      <button onClick={updateLikes}>{likes}</button>
    </div>
  );
}

 

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن