عند تغيير state يطرأ عنه عرض لل state قبل ان يتغير

Rayden Storm · 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 ما المشكل?

Salah Eddin Beriani2 · 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 بعد تحديثه داءما ويمكنك اجراء العملية التي تريدها على اخر تحديث له

عند تغيير state يطرأ عنه عرض لل state قبل ان يتغير

السؤال

Rayden Storm

1 جواب على هذا السؤال

Recommended Posts

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية