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

بتاريخ 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;

الخطأ هو أنك لم تنسق الـ 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)}`);
};

بتاريخ 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)

بتاريخ 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 إلى رقم، ربما يكون من الافضل مشاركة ملفات المشروع بالكامل.

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

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

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

src.zip

بتاريخ 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;

 

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