Rayden Storm نشر 24 فبراير 2021 أرسل تقرير مشاركة نشر 24 فبراير 2021 لدي مشكلة في هذا الكود import React from 'react'; export default function Counter() { const [count, setCount] = useState(1); const increment = () => { setCount(count + 1); console.log(count); }; const decrement = () => { setCount(count + 1); console.log(count); }; return ( <div> <button onClick={decrement}>-</button> {count} <button onClick={increment}>+</button> </div> ); } مثلا اذا كان state يساوي 4 وقمت بالضغط على زر الزيادة يصبح 5 لكن في تلك الحظة console.log تعرض 4 عوض الرقم 5 ما المشكل? اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Salah Eddin Beriani2 نشر 24 فبراير 2021 أرسل تقرير مشاركة نشر 24 فبراير 2021 setCount هي عملية asynchronous يعني تحديث ال state لا يكون لحظي ففي اللحظة التي يشتغل فيها console.log ال state لم يتغير بعد لذلك تحصل على ال state قبل ان يتغير. فاذا كانت لديك عملية لتقوم بها على ال state المتغير فيمكنك تغيير الكود ليصبح كالتالي import React from 'react'; export default function Counter() { const [count, setCount] = useState(1); const increment = () => { setCount(currentCount => currentCount + 1); }; const decrement = () => { setCount(currentCount => currentCount - 1); }; //عند تحديث الحالة يعاد تشغيل المكون useEffect(() => { console.log(count) }, [count]) return ( <div> <button onClick={decrement}>-</button> {count} <button onClick={increment}>+</button> </div> ); } هكذا ستحصل على ال state بعد تحديثه داءما ويمكنك اجراء العملية التي تريدها على اخر تحديث له اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Rayden Storm
لدي مشكلة في هذا الكود
مثلا اذا كان state يساوي 4 وقمت بالضغط على زر الزيادة يصبح 5 لكن في تلك الحظة console.log تعرض 4 عوض الرقم 5 ما المشكل?
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.