لماذا dispatch يأخذ القيمة انتجر القديمة للمرة الاولى فقط وليست الجديدة المحدثة عندما أستخدم useState ؟ ويأخذ القيمة الجديدة المحدثة بواسطة setState فى المرة الثانية ؟؟

ممتاز! لقد قمت بكتابة تطبيق مشابه الآن، وقمت بإستعمال number و setNumber بداخل الـ store وكانت القيمة تعمل بشكل سليم. هل يمكنك مشاركة الكود كامل لأستطيع مساعدتك؟ أريد أن أشغل التطبيق لأستطيع إعطائك حل سليم 100%.

ماذا تستخدم لعمل update للـ store؟ هل تستعمل mapDispatchToProps؟
أيضاً، بداخل الـ FlatList يتم إستعمال cakes بداخل data، من أين تأتي مصفوفة الـ cakes؟

بتاريخ منذ ساعة مضت قال إسلام عبدالعزيز:

ماذا تستخدم لعمل update للـ store؟ هل تستعمل mapDispatchToProps؟
أيضاً، بداخل الـ FlatList يتم إستعمال cakes بداخل data، من أين تأتي مصفوفة الـ cakes؟

أنا أستخدم useSelector و useDispatch 

أنا أتى بمصفوفة ال cakes عن طريق ال useSelector واضعها فى ال Flatlist .. هذا هو الكود ..

  const cakes = useSelector((state) => state.cakes)

وهذه المصفوفة اقوم بتخزينها فى initialState داخل ال Reducer

بتاريخ 2 ساعات قال إسلام عبدالعزيز:

ممتاز! لقد قمت بكتابة تطبيق مشابه الآن، وقمت بإستعمال number و setNumber بداخل الـ store وكانت القيمة تعمل بشكل سليم. هل يمكنك مشاركة الكود كامل لأستطيع مساعدتك؟ أريد أن أشغل التطبيق لأستطيع إعطائك حل سليم 100%.

حسنا سوف أرفعه على gitHub وأرسل الرابط لك 

اخي الكود الذي وفرته يحتوي على مشاكل كثيرة أولا مما رأيت أنك تحتاج قيمة ال state number لتكون رقم وأعطيته قيمة أولية 1 لكن TextInput أعتقد أنه يخزن القيمة على شكل string وفي ال reducer أنت حولت القيمة action.number الى number يعني في حالتك لتجلب القيمة الحالية لل state يجب ان تقوم بتغيير setNumber لتعمل هكذا

const [number, setNumber] = useState("1");

     <TextInput value={number} onChangeText={(text) => setNumber(prev => prev + text)} /> 

setNumber تعمل asynchronous وباعطاءك لل setNumber ال callback أنت تضمن الحصول على القيمة الحالية لل state

بتاريخ On 3/2/2021 at 15:31 قال Ahmed Sawy:

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

أصمم تطبيق بواسطة ريأكت ناتيف و ريدكس لبيع الكعك وتنظيم الارباح والكمية .. ولكن أقف على شئ أخير وهو عندما أريد أن أزيد الكعك بقيمة من داخل ال TextInput هنا تظهر المشكلة .. عندما تكون قيمة ال TextInput = 10 مثلا .. اعندما أضغط على اضافة فانها تعمل بشكل صحيح وتضيف 10 وهذا يعمل على ما يرام .. لكن عندما أغير هذه ال 10 الى مثلا 20 .. عندما أعمل dispatch  للمرة الاولى تحصل المشكلة وهى انه يضيف فى المرة الاولى 10 أى انه يضيف القيمة القديمة ثم بعد ذلك يبدأ باضافة ال 20 أى القيمة المحدثة ولكن فى المرة الثانية  .. لكن لما .. أنا اريده ان يضيف ال 20 من أول مرة وليست من ثانى مرة !! 

مثال أخر .. عندما أقوم مثلا بتغيير قيمة ال TextInput مثلا من 20 الى 5 مثلا .. عندما أعمل dispatch للمرة الاولى فانه بدلا من اضافة 5 .. انه يضيف 20 هذا فقط يحدث فى المرة الاولى ولكن بعد ذلك يضيف ال 5 ويعمل كل شئ على ما يرام .. لماذا لا يضيف 5 من المرة الاولى ؟

التطبيق يعمل جيدا لكن مشكلة المرة الاولى هذا سيئة جدا واريد حلها .. وانا اعتقد انه المشكلة فى ال value او onChangeText الخاصة ب TextInput .. 

 

هذه هى الاكواد ..

 

// UseState

      const [number, setNumber] = useState(1);


// The UI

     <TextInput value={number} onChangeText={(text) => setNumber(text)} /> // اعتقد ان المشلكة هنا

     <FlatList
        horizontal
        data={cakes}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <CakeContainer
            title={item.title}
            price={item.price}
            qty={item.qty}
            cost={item.cost}
  
            MakeNumButton={() => dispatch(makeNumCake(item.id - 1, number))}
            SellNumButton={() => dispatch(sellNumCake(item.id - 1, number))}
          />
        )}
      />
            
            
// هذه أكواد الريكس ولكنى اعتقد ان المشكلة ليست بها


// Actions   

export const sellNumCake = (id, number) => ({
  type: SELL_NUMBER_CAKES,
  payload: id,
  number,
});

export const makeNumCake = (id, number) => ({
  type: MAKE_NUMBER_CAKE,
  payload: id,
  number,
});            


// Reducers

    case MAKE_NUMBER_CAKE:
      const newCakes = [...state.cakes];
      newCakes[action.payload].qty += +action.number;
      return {
        ...state,
        cakes: newCakes,
        cost: state.cost + state.cakes[action.payload].cost * action.number,
      };

    case SELL_NUMBER_CAKES:
      if (state.cakes[action.payload].qty >= action.number) {
        const newSoldCakes = [...state.cakes];
        newSoldCakes[action.payload].qty -= +action.number;
        return {
          ...state,
          cakes: newSoldCakes,
          grossProfit:
            state.grossProfit +
            state.cakes[action.payload].price * action.number,
        };
      }

 

تم حل السؤال

تم حل السؤال