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

Adam Ebrahim

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    165

  • تاريخ الانضمام

  • تاريخ آخر زيارة

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Adam Ebrahim

  1. مشكلة Network Error Stack trace في axios مع react.js

    في PHP

    نشر

    أحاول عمل طلب request من خلال مكتبة axios من واجهة موقع مبنية بـ react لكني أحصل على الخطأ التالي: 

    Error: Network Error Stack trace: 
createError@http://localhost:3001/static/js/index.js:2012:13 handleError@http://localhost:3001/static/js/index.js:910:12

    وهذا هو الكود الخاص بمكتبة axios 

    axios.get(`http://localhost:3001/persons?fname="adam"&lname=${lname}`)
.then(function(response) {console.log(response);})
.catch(function(error) {console.log(error);});

     

    • أعجبني 1

  2. خطأ Uncaught Error: Invariant Violation في react

    في جافا سكريبت

    نشر · تم التعديل في بواسطة Adam Ebrahim

    حاولت تطبيق مثال بسيط للغاية من موقع رياكت الرسمي، وظهر لي الخطأ التالي 

    Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

    بالرغم من أن الكود بسيط للغاية إلا أنني لا أفهم رسالة الخطأ أو سببها، هذا الكود الخاص برياكت (المثال): 

    <!doctype html>
<html>
  <head>
    <title>Example</title>
    <script>
var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Hello, World!</h1>;
  }
});

React.renderComponent(<App />, document.body);
    </script>
  </head>
  <body>
    body content
  </body>
</html>

    أرجو المساعدة في حل هذا الخطأ أو شرح رسالة الخطأ نفسها.

    • أعجبني 1

  3. روابط react-router لا تعمل عند تحديث الصفحة

    في جافا سكريبت

    نشر

    أعمل على مشروع صغير بإستخدام react.js واستخدم react-router لجعل الموقع SPA، وكل شيء يعمل على أكمل وجهه عندما أضغط على رابط معين يتم تحميله بصورة صحيحة، لكن عند الدخول إلى الرابط من خلال كتابته في أعلى المتصفح أو عند تحديث الصفحة لا يعمل وأحصل على الخطأ  

    Cannot GET /persons

    ولا أستطيع الدخول إلى الصفحة إلا إذا كتبت علامة # قبل الرابط هكذا: 

    localhost:8000/#/persons 
    var routes = (
    <Route name="home" path="/" handler={Home}>
        <Route name="persons" path="/persons" handler={Persons}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

    هذا هو الكود الخاص بال react-router

  4. خطأ Maximum update depth exceeded

    في جافا سكريبت

    نشر

    أحاول أن أقوم بتغير الحالة الخاصة بمكون react عند  الضغط على زر معين لتصبح true بدلًا من false أو العكس ولكن يظهر لي الخطأ التالي:

    اقتباس

    Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

    فهمت من الخطأ أنه تم تغير حالة المكون عدد كبير من المرات، وللحفاظ على أداء الصفحة يظهر هذا الخطأ، لكن المشكلة أن هذا الخطأ يظهر بدون أن أضغط على الزر حتى.

    هذا الكود الذي أستعمله: 

    import React, { Component } from 'react';

class Row extends React.Component {
    constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  
    toggle(){
        this.setState({ details: !this.state.details }); 
    }

    render() {
        return (
            <div> 
                <span className={this.state.details ? "block" : "hidden"}>Some Content</span>
                {<div className="btn btn-lg" onClick={this.toggle()}>Toggle</div>}
            </div>
    )}
}

export default Row;

     

    • أعجبني 1

  6. كيفية إستخدام font awesome مع react؟

    في أسئلة البرمجة

    نشر

    أريد تثبيت أيقونات font awesome في مشروع رياكت بطريقة صحيحة من خلال npm، كنت أستهدم طريقة CDN مع المشاريع العادية ولكن لا أعرف كيف أستخدم npm لتثبيت font-awesome.

    حاولت تثبيتها ولكن عندما استهدم الكود التالي لا تظهر على الإطلاق: 

    <i class="fa fa-spinner fa-spin">

     

  7. إضافة prop وفقًا لشرط في React؟

    في جافا سكريبت

    نشر · تم التعديل في بواسطة Adam Ebrahim

    أريد أن أضيف خاصية لمكون react لدي وفقًا لشرط، فمثلًا أريد أن أحذف الخاصية disable إن كان المتغير name يحتوي على قيمة. كيف أقوم بذلك؟ 

    const InputComponent = function() {
    const name = "My Name";

    return (
      	// في هذا الجزء أريد أن يتم حذف الخاصية disable لأن المتغير name يحتوي على قيمة
        <input type="text" disabled />
    );
}

     

    • أعجبني 1

  9. الفرق بين مكون function و class في React

    في جافا سكريبت

    نشر

    أريد أن أعرف ما الفرق بين مكون الدالة function component ومكون الصنف Class Component لأني لا أرى أي فرق بينهم حتى الآن بالرغم من أني سمعت في بعض الفيديوهات أن بينهما فرق ولكن لا يقومون بتوضيح هذا الفرق، مع العلم أن إستخدام أي منهما لا يسبب أي مشكلة معي. فهل يمكن توضيح الفرق بينهما ومتى أستخدم كل منهما؟

    • أعجبني 2

  10. كيفية إستخدام عنصر script مع Reactjs؟

    في جافا سكريبت

    نشر

    لدي مشكلة في إضافة عنصر Script داخل كود react ولكن عند إضافة العنصر لا يعمل وكأني لم أقم بإضافته من الأساس ولا توجد أي أخطاء ظاهرة لدي. لقد قمت بتجربة الكود التالي: 

    render() {
    return (
        <script src="https://example.com/JsFile.js"></script>
    );
}

     

    • أعجبني 1

  11. مشكلة Cannot destructure property

    في جافا سكريبت

    نشر

    لدي مشروع صغير لجلب صور من موقع Unsplash، ويظهر لي نفس الخطأ كل مرة، صراحة لا أعرف سبب المشكلة هنا، وهذا هو الكود الذي أستخدمه:

    ملف Mainboard.js 

    import React from 'react';
import styled from 'styled-components';
import Pin from './Pin';
function Mainboard(props) {
let { pins } = props; 
return (
    <Wrapper>
        <Container>
            {pins.map((pin, index) => {
                let {urls} = pin;
              return <Pin key={index} urls={urls}/>
            })}   
        </Container>
    </Wrapper>
  )}
 export default Mainboard;

     

    وملف Pin.js: 

    import React from 'react';
import styled from 'styled-components';

function Pin(props) {
let { urls } = props;
return (
    <Wrapper>
    <Container>
     <img src={urls?.regular} alt="pin"/>
    </Container>
 </Wrapper>
)}
export default Pin;

    في كل مرة يظهر لدي هذا الخطأ 

    Cannot destructure property 'urls' of 'pin' as it is undefined

     

    • أعجبني 1

  12. ما هو العنصر الفارغ <> في react.js؟

    في جافا سكريبت

    نشر

    أتعلم أستخدام React وفي الفيديو التعليمي إستخدم المدرب العنصر <> </>  في الكود التالي: 

    class Component extends Component {
  render() {
    return <> <Post/> <Post/> </>
  }
}

    ولا أعرف ما غائدة هذا العنصر، وعندما أقوم بإزالته يظهر لي هذا الخطأ 

    multiple components must wrapt with end

     

    • أعجبني 2
×
×
  • أضف...