خطأ في تطبيق الدوال في ريآكت

محمود سعداوي2 · 6 مارس 2023

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

في المثال التالي:

Capture.JPG.d6bb322ee366340dd31ff458606ff158.JPG

عند النقر على Add User تمكنت من إضافة يوزر آخر .

بقية الأزرار الهدف منها هو تطبيق دوال مثلما تشير مسمياتها.

المشكل أنه لم يظهر لي أي شء إذ لم يقع أي تغيير عند النقر على الأزرار كما أن console لم يظهر لي أي خطأ

بتاريخ 1 دقيقة مضت قال محمود سعداوي:

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

في المثال التالي:

عند النقر على Add User تمكنت من إضافة يوزر آخر .

بقية الأزرار الهدف منها هو تطبيق دوال مثلما تشير مسمياتها.

المشكل أنه لم يظهر لي أي شء إذ لم يقع أي تغيير عند النقر على الأزرار كما أن console لم يظهر لي أي خطأ

علما أني جربت الأكواد التالية

  let [data, setData] = useState([]);
  async function fetchRandomUsers() {
    const response = await fetch('https://randomuser.me/api')
    const responseData = await response.json()
    const newUser = {
        user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`,
        money: formatMoney(Math.floor(Math.random() * 1000000))
      }
    setData([...data, newUser]);
  }
  useEffect(() => {
    fetchRandomUsers()
  }, []);

  // Format number as money 
  function formatMoney(number) {
    return '$' + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
  }

  // Add User
  const handleAdd = () => {
    let addUser = [];
    let new_user = fetchRandomUsers();
    addUser.push(new_user)
  }

  // Double Money
  const doubleMoney = () => {
    data = data.map(user => {
      return {...user, money:user.money * 2}
    })
  }

  // Show Millionaires
  function showMillionaires(){
    // console.log('showMillionaires')
    data = data.filter(item => item.money > 500000)
  }

عمر قره محمد · 7 مارس 2023

بتاريخ 17 دقائق مضت قال محمود سعداوي:

تفضل ملفات الsrc

src.zipFetching info...

مرحباً محمود عدل الوظائف الخاصة بإضافة مستخدم جديد للشكل التالي :

async function fetchRandomUsers() {
    const response = await fetch('https://randomuser.me/api')
    const responseData = await response.json()
    const newUser = {
        user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`,
        // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم ***************
        money: Math.floor(Math.random() * 1000000) // الكود الجديد ****************
    }
    setData([newUser]);
}

// Add User
const handleAdd = async () => {
    const response = await fetch('https://randomuser.me/api');
    const responseData = await response.json();
    const newUser = {
        user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`,
        // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم ***************
        money: Math.floor(Math.random() * 1000000) // الكود الجديد ****************
    };
    setData([...data, newUser]);
};

بحيث لا تقوم بفرمتت المال في هذه المرحلة، وإنما تقوم بفرمتته عند عرضه وذلك في المكون Main.jsx :

import React from "react";

function Main({ data }) {
      // Format number as money
      function formatMoney(number) {
            return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
      }
      return (
            <div className='main'>
                  <h2>
                        <strong>Person</strong> Wealth
                  </h2>
                  {data.map((user, index) => (
                        <div key={index}>
                              <h4 className='person'>
                                    <strong>{user.user}</strong>
                                    {formatMoney(user.money)}
                              </h4>
                        </div>
                  ))}
            </div>
      );
}

export default Main;

Mustafa Suleiman · 6 مارس 2023

الخطأ هو أنك لم تنسق الـ state بشكل صحيح، وعليه لم يتم تحديث الـ state بشكل صحيح عند استخدام الأزرار الأخرى. هناك عدة نقاط يجب مراجعتها:

يجب عليك تحديث الـ state بشكل صحيح في كل دالة. على سبيل المثال، في دالة doubleMoney ، يتم تعيين قيمة جديدة لـ data بدلاً من تحديثها باستخدام setData.
عند استخدام دالة fetchRandomUsers، يجب أن تقوم بإرجاع القيمة الجديدة (newUser) ، وإذا لم تقم بذلك فلن تتم إضافة اليوزر الجديد إلى الـ state.
يجب عليك استخدام setData لتحديث الـ state بشكل صحيح في كل دالة.
لضمان تحديث الـ state بشكل صحيح، يمكنك استخدام دالة useState بشكل صحيح.
يجب تعيين دالة الـ filter و map إلى الـ state الجديد باستخدام setData، بدلاً من تغيير الـ state الحالي.

وهنا بعض التغييرات التي يجب عليك إجراؤها لجعل الكود يعمل بشكل صحيح:

const [data, setData] = useState([]);

// Add User
const handleAdd = async () => {
  const response = await fetch('https://randomuser.me/api');
  const responseData = await response.json();
  const newUser = {
    user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`,
    money: formatMoney(Math.floor(Math.random() * 1000000))
  };
  setData([...data, newUser]);
};

// Double Money
const doubleMoney = () => {
  const newData = data.map(user => {
    return {...user, money: user.money * 2}
  });
  setData(newData);
};

// Show Millionaires
const showMillionaires = () => {
  const newData = data.filter(item => item.money > 500000);
  setData(newData);
};

// Sort by richest
const sortByRichest = () => {
  const newData = [...data].sort((a, b) => b.money - a.money);
  setData(newData);
};

// Calculate entire wealth
const calculateWealth = () => {
  const wealth = data.reduce((acc, user) => (acc += user.money), 0);
  alert(`Total wealth: ${formatMoney(wealth)}`);
};

محمود سعداوي2 · 7 مارس 2023

بتاريخ 7 ساعة قال Mustafa Suleiman:

// Double Money
const doubleMoney = () => {
  const newData = data.map(user => {
    return {...user, money: user.money * 2}
  });
  setData(newData);
};

في هذه الحالة يرجع NaN بالنسبة للثروة

بتاريخ 7 ساعة قال Mustafa Suleiman:

// Show Millionaires
const showMillionaires = () => {
  const newData = data.filter(item => item.money > 500000);
  setData(newData);
};

أما في هذه فالصفحة ترجع فارغة و لايظهر أي خطأ في الكونسول

بتاريخ 8 ساعة قال Mustafa Suleiman:

// Sort by richest
const sortByRichest = () => {
  const newData = [...data].sort((a, b) => b.money - a.money);
  setData(newData);
};

هنا الصفحة لا تتغير و اليحدث ترتيب

بتاريخ 8 ساعة قال Mustafa Suleiman:

// Calculate entire wealth
const calculateWealth = () => {
  const wealth = data.reduce((acc, user) => (acc += user.money), 0);
  alert(`Total wealth: ${formatMoney(wealth)}`);
};

في هذه الحالة يظهر الخطأ التالي:

App.js:23 Uncaught TypeError: number.toFixed is not a function
at formatMoney (App.js:23:1)
at calculateWealth (App.js:60:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
at processDispatchQueue (react-dom.development.js:9086:1)
at dispatchEventsForPlugins (react-dom.development.js:9097:1)

عمر قره محمد · 7 مارس 2023

بتاريخ 23 دقائق مضت قال محمود سعداوي:
// Double Money
const doubleMoney = () => {
  const newData = data.map(user => {
    return {...user, money: user.money * 2}
  });
  setData(newData);
};
في هذه الحالة يرجع NaN بالنسبة للثروة

NaN تنتج عن اجراء عملية حسابية بين نص ورقم وهي تعني (ليس رقماً)

جرب تعديل الكود للشكل :

// Double Money
const doubleMoney = () => {
  const newData = data.map(user => {
    return {...user, money: Number(user.money) * 2}
  });
  setData(newData);
};

وجرب طباعة الـ user.money فإذا كانت تحتوي نصوص مثل $ أو غيرها فإنك بحاجة لحذف هذه النصوص قبل ضربها بـ 2.

بتاريخ 23 دقائق مضت قال محمود سعداوي:
بتاريخ 8 ساعة قال Mustafa Suleiman:
// Show Millionaires
const showMillionaires = () => {
  const newData = data.filter(item => item.money > 500000);
  setData(newData);
};
أما في هذه فالصفحة ترجع فارغة و لايظهر أي خطأ في الكونسول

اعتقد ان سبب المشكلة هنا هو نفسه، حيث يبدو أن الـ item.money ليست رقماً قابل للمقارنة بل هي عبارة عن نص، ويجب عليك ان تقوم بطباعة الـ item.money للتأكد من اهنها رقم، وفي حال لم تكن رقماً يجب ان تحاول ان تحولها إلى رقم بحذف النصوص ثم استخدام الوظيفة :

Number(item.money)

واعتقد ان باقي المشاكل جميعها ترجع لنفس السبب، فعليك تحويل الـ money إلى رقم قبل اجراء كل هذه العمليات الحسابية.
في حال لم تنجح بتحويل الـ money إلى رقم، ربما يكون من الافضل مشاركة ملفات المشروع بالكامل.

محمود سعداوي2 · 7 مارس 2023

بتاريخ 3 ساعة قال عمر قره محمد:

ربما يكون من الافضل مشاركة ملفات المشروع بالكامل

تفضل ملفات الsrc

src.zip

محمود سعداوي2 · 7 مارس 2023

بتاريخ 5 دقائق مضت قال عمر قره محمد:

مرحباً محمود عدل الوظائف الخاصة بإضافة مستخدم جديد للشكل التالي :

async function fetchRandomUsers() {
    const response = await fetch('https://randomuser.me/api')
    const responseData = await response.json()
    const newUser = {
        user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`,
        // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم ***************
        money: Math.floor(Math.random() * 1000000) // الكود الجديد ****************
    }
    setData([newUser]);
}

// Add User
const handleAdd = async () => {
    const response = await fetch('https://randomuser.me/api');
    const responseData = await response.json();
    const newUser = {
        user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`,
        // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم ***************
        money: Math.floor(Math.random() * 1000000) // الكود الجديد ****************
    };
    setData([...data, newUser]);
};

بحيث لا تقوم بفرمتت المال في هذه المرحلة، وإنما تقوم بفرمتته عند عرضه وذلك في المكون Main.jsx :

import React from "react";

function Main({ data }) {
      // Format number as money
      function formatMoney(number) {
            return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
      }
      return (
            <div className='main'>
                  <h2>
                        <strong>Person</strong> Wealth
                  </h2>
                  {data.map((user, index) => (
                        <div key={index}>
                              <h4 className='person'>
                                    <strong>{user.user}</strong>
                                    {formatMoney(user.money)}
                              </h4>
                        </div>
                  ))}
            </div>
      );
}

export default Main;

شكرا جزيلا أستاذ عمر

خطأ في تطبيق الدوال في ريآكت

السؤال

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

6 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Mustafa Suleiman

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

عمر قره محمد

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية