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

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

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

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

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

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

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

بتاريخ On 6‏/3‏/2023 at 20:00 قال محمود سعداوي:

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

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

عند النقر على 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

بتاريخ On 7‏/3‏/2023 at 10:33 قال محمود سعداوي:

تفضل ملفات ال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

بتاريخ On 6‏/3‏/2023 at 22:22 قال Mustafa Suleiman:

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

أظهر المزيد

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

بتاريخ On 6‏/3‏/2023 at 22:22 قال Mustafa Suleiman:
// Show Millionaires
const showMillionaires = () => {
  const newData = data.filter(item => item.money > 500000);
  setData(newData);
};
أظهر المزيد

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

بتاريخ On 6‏/3‏/2023 at 22:22 قال Mustafa Suleiman:
// Sort by richest
const sortByRichest = () => {
  const newData = [...data].sort((a, b) => b.money - a.money);
  setData(newData);
};
أظهر المزيد

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

بتاريخ On 6‏/3‏/2023 at 22:22 قال 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

بتاريخ On 7‏/3‏/2023 at 06:24 قال محمود سعداوي:
// 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.

بتاريخ On 7‏/3‏/2023 at 06:24 قال محمود سعداوي:
بتاريخ On 6‏/3‏/2023 at 22:22 قال 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

بتاريخ On 7‏/3‏/2023 at 06:47 قال عمر قره محمد:

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

أظهر المزيد

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

src.zipFetching info...

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

بتاريخ On 7‏/3‏/2023 at 10:53 قال عمر قره محمد:

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

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

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية