اذهب إلى المحتوى
  • 0

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

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

السؤال

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

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

Capture.JPG.d6bb322ee366340dd31ff458606ff158.JPG

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

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

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

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

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

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

Capture.JPG.d6bb322ee366340dd31ff458606ff158.JPG

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

1.JPG

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...