Adam Ebrahim

لدي الكود البسيط التالي: import React from "react"; function App() { const [number, setNumber] = React.useState(0); function updateNumber() { setNumber(state => state + 1); } console.log("this log is showing twice"); return ( <div className="App"> {number} <button onClick={updateNumber}>Increase Number</button> </div> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); في كل مرة اضغط فيها على الزر ، أحصل على سجلين في الـ console مما يشير إلى أن المكون يتم عرضه مرتين renders twice، لماذا يحدث هذا الأمر؟ هل هناك خطأ ما في الكود؟

أقوم بإستخدام lint في مشروع react ويظهر لي الخطأ التالي: error JSX props should not use arrow functions react/jsx-no-bind وأعتقد أن هنا سبب المشكلة (في onClick): {this.state.people.map(tile => ( <span key={tile.img}> <Checkbox onCheck={() => this.selectPerson(tile)} /> <GridTile actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="red"/></IconButton>}> <img onClick={() => this.handleOpen(tile.img)} src={tile.img} /> </GridTile> </span> ))} هل من الخطأ أن أستخدم inline arrow functions في JSX props؟ وإن كان كذلك ما هي الطريقة الأفضل لأمر كهذا؟

لقد تعلمت React خلال الأيام القليلة الماضية، وألقيت نظرة على بعض البرامج التعليمية والتفسيرات المتعلقة بالطرق المختلفة التي يمكنك من خلالها كتابة عناصر مختلفة. ومع ذلك، هناك واحد لم أفهمها بشكل جيد - وظيفة setState لتحديث حالة مكون React. على سبيل المثال ، لنفترض أن لدي صنف كما يلي، ويقوم هذا الصنف بإستخدام API لجلب الأسماء من السيرفر بإستخدام fetch: class Person extends React.Component { constructor() { super() state = { firends: [] } } componentDidMount() { // هنا ستكون fetch و setState } render() { return { <div className="container"> {this.state.firends} </div> } } } نظرًا لأنني أجريت عملية الجلب والتعيين وreturn لهذه الدالة - سأقوم بعد ذلك بتحديث friends: [] بالنتائج القادمة من الـ API. سؤالي حول الطرق المختلفة التي رأيتها فيما يتعلق بكيفية تحديث حالة المكون friends، حيث رأيت طريقتين مختلفتين لعمل نفس الشيء: الطريقة الأولى سهلة للغاية وواضحة أيضًا this.setState({firends: names}) أما الطريقة الأخرى فتبدو أكثر تعقيدًا بدون سبب ويتم وصفها بأنها أكثر أمانًا: this.setState(prevState => ({ friends: prevState.friends.concat(names) })) هل يمكن لشخص ما أن يشرح مزايا استخدام كل طريقة منهما؟ وما عيوب كلًا منهما؟

مرحبًا أحاول أن أستعمل firebase في تطبيق react ومن المفترض أن أحصل على parameter من URL بالشكل التالي: http://localhost:8000/#/signin?_k=d2suqb&__firebase_request_key=somethingHere سؤالي هو كيف يمكنني تحديد مسار في ملف routes.jsx الخاص بي لالتقاط قيمة الـ parameter هذا __firebase_request_key أستخدم React Router الإصدار الخامس.

لدي مصفوفة في state خاصة بمكون react، وهذه المصوفة تحتوي على كائنات objects بالشكل التالي: var DescriptionBox = React.createClass({ getInitialState: function() { return {data: [ { id: 1, text: "foo" }, { id: 2, text: "bar" } ]}; }, handleDescriptionEdit: function(id, text) { var oldDescription = this.state.data.filter({ function(c) { c.id == id; }).first(); var updatedDescriptions = ??; // كيف أقوم بتحديث الكائن السابق من هنا this.setState({data: updatedDescriptions}); } }

لدي REST API في Backend يعمل بـ Laravel وأريد أن أقوم بجلب البيانات في شكل JSON من خلال Fetch call في React، وكل شيء يعمل بشكل سليم إلا أن هناك خطب ما في النتيجة. هنا كود دالة fetch function getFriends() { fetch('http://localhost:8000/friends', { method: 'POST', mode: 'no-cors', credentials: 'same-origin', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }) }).then(function (response) { console.log(response); // يبدو أن هناك خطأ هنا return response.json(); }); } لكن النتيجة تظهر بهذا الشكل: [ { "0x1": { "users": [], "owner": "0x2", "title": "Ahmed Ali", "description": "", "id": "id_00001" }, "0x2": { "username": "ahmed232", "solutions": [], "exercises": [], "roles": [ "0x3", "0x4", "0x5" ], "id": "user_00001" }, "0x3": { "roleName": "ROLE_ADMIN", "objectClass": "role", "id": "role_00001" } } ] فحصت الكود السابق بأستخدام jsonlint ويبدو أنه كود json صحيح، لكن لا أعرف لماذا تظهر رموز مثل 0x1 و 0x2 إلخ؟

لدي بعض المكونات داخل بعضها البعض بالإضافة إلى مكون آخر منفصل عنهم، بنيه المكونات كما بالشكل التالي: - Component 1 -|- Component 2 ----|- Component 3 -------|- Component 4 - Component 5 كما تلاحظ المكون الأول يحتوي مكون بداخله وهذا الأخير يحتوي على مكون آخر Compnent 3 وهكذا ، الآن أريد أن يعرض المكون 5 بعض البيانات اعتمادًا على حالة state الخاصة بالمكون 4. نظرًا لأن الخاصيات props غير قابلة للتغيير immutable، لا يمكنني ببساطة حفظ حالتها في المكون 1 وإعادة توجيهها للمكون 5.

تطبيقي هو في الأساس قائمة بفلاتر filters وزر لتغيير التخطيط. في الوقت الحالي ، أستخدم ثلاثة مكونات: <list /> و <Filters /> و <TopBar /> ، عندما أقوم بتغيير الإعدادات في <Filters /> أريد تشغيل بعض الدوال الموجودة في <list /> لتحديث الواجهة، كيف يمكنني عمل ذلك؟ كيف يمكنني جعل هذه المكونات الثلاثة تتفاعل مع بعضها البعض، أو هل أحتاج إلى نوع من إدارة الحالة state management في المكون الأب لهذه المكونات الثلاثة؟

أحاول أن أضع كود HTML أقوم بجلبة بإستخدام Ajax لكني عند عرض هذا الكود يظهر في شكل نص وليس كود يتم تطبيقه في المتصغح، هنا كود Ajax الذي أستخدمه: $.ajax({ url: 'https://example.com/posts/, dataType: "json", success: function(data) { this.setState({ posts: data.posts }) }.bind(this) }); ثم أقوم بعرض كود HTML بالشكل التالي: <div> {this.state.posts} </div> في النهاية أحصل على الكود الصحيح، لكن المشكلة تكمن في طريقة عرضه في المتصفح حيث يظهر كنص وليس كود كما وضحت سابقًا.

كيف يمكنني أن أقوم بتمرير قيمة لدالة يتم إستدعائها في onClick event في مكون React، حاولت إستخدام الكواد التالي: var ClickableButton = React.createClass({ handleClick: function(value) { console.log(value); }, render: function () { var that = this; return( <button onClick={that.handleClick} >Content</button> ); } }); لكن بدلًا من ذلك ظهر لي كائن من نوع SyntheticMouseEvent في الـ console بالشكل التالي: SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target كيف يمكنني تمرير قيمة إلى دالة handleClick حيث يمكنني طباعتها في الـ Console؟

مرحبًا جميعًا أحصل على هذا الخطأ عند تشغيل مشروع React: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. هذا هو الكود الخاص بي: const React = require('react') const ReactDOM = require('react-dom') const Router = require('react-router') const Route = Router.Route const Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>Home Page</h1> <Link to="/another">Another</Link> </div> ) } }) var About = require('./components/Main') ReactDOM.render(( <Router> <Route path="/" component={App}> <Route path="another" component={Another} /> </Route> </Router> ), document.body) وهنا ملف Main.jsx: var React = require('react'); var Main = React.createClass({ render:function() { return ( <p>Some Content</p> ); }, }); module.exports = Main; يبدو أن المشكلة من الجزء التالي في الملف الأول: var About = require('./components/Main') ReactDOM.render(( <Router> <Route path="/" component={App}> <Route path="another" component={Another} /> </Route> </Router> ), document.body)

أحاول تحويل مشروع React إلى ES6، ولدي مكونان: مكون أب ومكون ابن، لكن يظهر لي الخطأ التالي عند إستخدام this.state في الكود: Uncaught TypeError: Cannot read property 'state or props' of undefined هنا المكون الأب Parent component: export default class Parent extends Component { constructor(props) { super(props); this.state = {code: ''}; } setCodeChange(code) { this.setState({code: code}); } login() { // هنا تحدث المشكلة نتيجة لخطأ this.state is undefined if (this.state.code == "") {} } render() { return ( <div> <Child onCodeChange={this.setCodeChange} onLogin={this.login} /> </div> ); } } المكون الابن child component: export default class Child extends Component { constructor(props) { super(props); } handleCodeChange(e) { this.props.onCodeChange(e.target.value); } login() { this.props.onLogin(); } render() { return ( <> <input name="code" onChange={this.handleCodeChange.bind(this)}/> <button id="login" onClick={this.login.bind(this)}> </> ); } } Child.propTypes = { onCodeChange: React.PropTypes.func, onLogin: React.PropTypes.func }; المشكلة تحدث عند الضغط على الزر #login

كيف يمكنني أن أستخدم document.getElementById في مكونات React حيث يظهر لي الخطأ التالي عند إستعمالها: TypeError: document.getElementById(...) is null هذا هو الكود الخاص بي: var Progressbar = React.createClass({ getInitialState: function () { return { finished: this.props.finished }; }, addPrecent: function (value) { this.props.finished += value; this.setState({ finished: this.props.finished }); }, render: function () { var finished = this.props.finished; if (finished < 0) { finished = 0 }; // هنا يتم عمل مكون Progress bar ولم أقم بإرفاق الكود لعدم أهميته في المشكلة return (...); } // المكون الرئيسي / الأب var App = React.createClass({ handleClick: function (e) { // هذا هو السطر الذي يسبب المشكلة السابقة document.getElementById('Progress').addPrecent(10); }, render: function () { return ( <div class="center"> <Progressbar completed={25} id="Progress" /> <input type="button" onClick={this.handleClick} value="+10" /> </div> ) } });

كيف أقوم بتمرير parameter في عنصر link بحيث يمكنني إستخدام هذه الخواص في الصفحة الأخرى بإستخدام React Router؟

مرحبًا أحاول إستخدام حزمة react-i18next لإضافة أكثر من لغة في تطبيق React لكني أحصل على الخطأ التالي: Attempted import error: 'initReactI18next' is not exported from 'react-i18next' قمت بإنشاء ملف i18n.js وهنا ما يحتويه من كود: import { initReactI18next } from 'react-i18next'; import i18n from 'i18next'; import Backend from 'i18next-http-backend'; i18n.use(Backend) .use(initReactI18next) .init({ // الكود التالي من وثائق الخزمة نقسها // https://react.i18next.com/getting-started fallbackLng: 'en', debug: true, // لإظهار الأخطاء في console interpolation: { escapeValue: false, } }); export default i18n; وهنا محتويات ملف package.json كامل: { "name": "ٌreact", "version": "0.1.0", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "dependencies": { "axios": "^0.21.1", "i18next": "^19.9.2", "i18next-browser-languagedetector": "^6.0.1", "i18next-http-backend": "^1.1.1", "i18next-xhr-backend": "^3.2.2", "prop-types": "^15.7.2", "proptypes": "^1.1.0", "react": "^17.0.1", "react-alice-carousel": "^1.17.2", "react-dom": "^17.0.1", "react-i18next": "^11.8.10", "react-loader-spinner": "^4.0.0", "react-native-gesture-handler": "^1.5.2", "react-navigation": "^4.0.10", "react-navigation-stack": "^1.10.3", "react-router-dom": "^5.1.2", "react-scripts": "^4.0.3" }, "devDependencies": { "@babel/plugin-proposal-export-default-from": "^7.8.3", "css-loader": "^3.4.2" } }

أحاول تشغيل تطبيق React مكتوب بـ TypeScript، وواجهت بعض الأخطاء. حتى عند محاولة تحويل الملف نفسه من TypeScript إلى جافاسكريبت أحصل على الخطأ التالي، حاولت البحث عن حل للمشكلة لكن لم أجد أي حل مفيد. TS2304: Cannot find name 'require' هذا هو محتوى الملف هنا: 'use strict'; const mongoose = require('mongoose'), mongooseSchema = mongoose.Schema; // The rest of the code الكود بسيط للغاية لكن رغم ذلك يظهر الخطأ السابق بدون سبب مفهوم.

أتابع دورة React ويقوم المدرب في بعض الأحيان بتمرير props إلى دالة super داخل التابع constructor في مكون من نوع class component بهذا الشكل: // أحيانًا بهذه الطريقة class TestComponent extends React.Component { constructor(props) { super(); } } // وأحبانًا أخرى بالطريقة التالية class TestComponent extends React.Component { constructor(props) { super(props); } } ما الفرق بين الطريقتين؟ وهل ستسبب مشكلة إن إستخدمت طريقة مكان الأخرى؟

مرحبًا، أحاول عمل مكون HOC في React بإستخدام typescript لكي أتحكم في نظام Authentication لكن عند تنفيذ الكود يظهر لي الخطأ التالي: auth.ts:12:3 - error TS1005: '>' expected. 12 return <WrappedComponent {...this.props} />; هنا الكود الخالص بي والذي يظهر هذا الخطأ في ملف auth.ts: import * as React from 'react'; import { context } from 'next'; export const withAuthSync = (WrappedComponent: ComponentExtra) => class extends React.Component { static async getInitialProps(ctx: context) { const authToken = auth(ctx); const allProps = WrappedComponent.getInitialProps && (await WrappedComponent.getInitialProps(ctx)); return { ...allProps, authToken }; } render() { // السطر التالي هو ما يسبب الخطأ على ما أظن return <WrappedComponent {...this.props} />; } }; لا أعلم لماذا يتم إظهار كود JSX على أنه خطأ

عند تشغيل الكود التالي: const Route = ({ component: Component, ...rest }) => ( <div {...rest} render={props => ( <Component {...props}/> )}/></div> ) يظهر الخطأ التالي: Uncaught Error: Cannot find module "./Login" at webpackMissingModule (router.js:9) at Object.<anonymous> (router.js:9) at __webpack_require__ (bootstrap 18b9132…:555) at fn (bootstrap 18b9132…:86) at Object.<anonymous> (index.js:22) at __webpack_require__ (bootstrap 18b9132…:555) at fn (bootstrap 18b9132…:86) at Object.<anonymous> (bootstrap 18b9132…:578) at __webpack_require__ (bootstrap 18b9132…:555) at bootstrap 18b9132…:578 webpackMissingModule @ router.js:9 (anonymous) @ router.js:9 __webpack_require__ @ bootstrap 18b9132…:555 fn @ bootstrap 18b9132…:86 (anonymous) @ index.js:22 __webpack_require__ @ bootstrap 18b9132…:555 fn @ bootstrap 18b9132…:86 (anonymous) @ bootstrap 18b9132…:578 __webpack_require__ @ bootstrap 18b9132…:555 (anonymous) @ bootstrap 18b9132…:578 (anonymous) @ bootstrap 18b9132…:578 webpackHotDevClient.js:233 Error in ./src/Login.js Syntax error: Unexpected token (13:43) 11 | 12 | > 13 | const PrivateRoute = ({ component: Component, ...rest }) => ( | ^ 14 | <div {...rest} render={props => ( 15 | <Component {...props}/> فحصت الكود عدة مرات ولم أجد سبب المشكلة، حاولت البحث عن حل للمكشلة لكن دون جدوى.

لدي مكونان components كالتالي: مكون أب parent component مكون ابن child component كيف يمكنني أن أستدعي دالة من المكون الابن داخل المكون الأب، لقد جربت الكود التالي لكن لم يفلح الأمر معي: // هنا المكون الابن ويحتوي على الدالة // getLog() التي أحتاج إلى تنفيذها من خلال المكون الأب class Child extends Component { getLog() { console.log('Called from child'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } // هذا هو المكون الأب الذي يتم إستدعاء المكون الابن فيه // أحتاج إلى أستدعاء الدالة getLog من المكون الابن هنا class Parent extends Component { render() { return ( <Child> <button onClick={Child.getLog()}>Get Log</button> </Child> ); } } هل توجد طريقة لتشغيل الدالة getLog من داخل المكون الأب؟

قمت بإنشاء مشروع جديد بإستخدام create-react-app ولكن عند تشغيل المشروع يتم تنفيذ الكود مع الكثير من التحذيرات بالإضافة إلى الخطأ التالي: ./node_modules/rc-picker/node_modules/moment/src/lib/locale/locales.js Module not found: Can't resolve './locale' in '/Users/PC/Desktop/react_projects/node_modules/rc-picker/node_modules/moment/src/lib/locale' وهذا ما يحتويه المشروع من مكتبات في ملف package.json: "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "antd": "^4.2.0", "axios": "^0.19.2", "formik": "^2.1.4", "react": "^16.13.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "redux": "^4.0.5", "moment": "2.25.1", "yup": "^0.28.5" },

حاولت أن أقوم ببناء مشروع React من الصفر، ولكن يظهر لي الخطأ التالي: ./src/App.js Line 4: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks وهذا هو الكود الذي كتبته: import React from 'react'; const app = props => { const [friendState, setFriendSate] = useState({ firend_ids:[ 1, 2, 3 ], }); return ( <div className="App"> <h1>Hello, World!</h1> </div> ); }; export default app; بالرغم من أن الكود السابق بسيط للغاية إلا أن رسالة الخطأ غير مفهومة ولا تساعد البته.

أريد أن أستخدم صورة موجودة لدي في مجلد public داخل المشروع الرئيسي وليست موجودة داخل مجلد src وعند محاولة إستدعاء هذه الصورة يحدث الخطأ التالي: ./src/components/website_index.js Module not found: You attempted to import ../../public/logo.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. وهذا هو الكود الذي كتبته: import logo from '../../public/logo.png'; <img alt="My Brand" src={logo}/> هل توجد طريقة لفعل ذلك؟

بدأت أتعلم redux بالأمس فقط وعند محاولة التطبيق يظهر لي الخطأ التالي عندما أحاول تشغيل مشروع React كنت أعمل عليه: ./src/components/App/App.js Attempted import error: 'combineReducers' is not exported from '../../store/reducers/'. وأعتقد أن سبب الخطأ هو هذا السطر في ملف App.js import { combineReducers } from '../../store/reducers'; بالرغم من أني قمت بعمل export بشكل صحيح في ملف store/reducers: export default combineReducers({followerReducers, friendsReducers});

لدي مصوفة من المكونات موجودة في state وكنت أريد أن أضيف مكون جديد، لذلك بدأت استخدم الكود التالي: this.state.friends.push(person); this.setState({ friends: this.state.friends }); هل هذه الطريقة صحيحة أم لا؟ أنا أرى أن عمل مصفوفة جديدة ثم إستخدامها للتعديل على state يستهلك أكثر من المطلوب.