Rayden Storm

أنا أتساءل عن كيفية استخدام مراجع لعدة عناصر دينامكيا مثال هكذا const { useRef, useState, useEffect } = React; const App = () => { const elRef = useRef(); return ( <div> {data && data.posts.map((post) => ( <div ref={elRef} > {post.tilte} </div> ))} </div> ); }; لكن في المثال الذي أرفقته هو مرجع واحد لعدة عناصر وانا اريد كل عنصر يمتلك مرجع خاص به دينامكيا

هل هذه هي الطريقة الصحيحة لحذف عنصر باستخدام redux؟ DELETE_PLATE: (state, action) => ({ ...state, plates: [...state.plates.splice(0, action.payload), ...state.plates.splice(1)], })

أتساءل عما إذا كانت هناك طريقة صحيحة للقيام بتصميم css شرطي وقد رأيت استعمال بهذه الطريقة style={{ color: completed ? 'green' : 'none' }} أفضل عدم استخدام التصميم المضمن ، لذا أريد بدلاً من ذلك استخدام فئة للتحكم في التصميم الشرطي. كيف يمكن للمرء أن يتعامل مع هذا بطريقة تفكير React؟ أم يجب علي فقط استخدام طريقة التصميم المضمنة هذه؟

أنا استخدم redux كثيرا موخرا وفي العادة أستخدم connect بهذه الطريقة import React from 'react' import { connect } from 'react-redux' class App extends React.Component { ...... } const mapStateToProps = (state) => { .... } const mapDispatchToProps = (dispatch) { ..... } export default connect(mapStateToProps, mapDispatchToProps)(App) ومؤخرا رأيت استخدام جميل بهذه الطريقة لكنني لا أفهم الشيفرة لانني لم أرى مثلها من قبل import React from 'react' import { connect } from 'react-redux' const mapStateToProps = (state) => { .... } const mapDispatchToProps = (dispatch) { ..... } @connect(mapStateToProps, mapDispatchToProps) export default class App extends React.Component { .... }

لماذا الاستيراد بهذه الطريقة لا يعمل و ماهو البديل لتحقيق استيراد ديناميكي import React from 'react'; const page = "Page" import Page from `./${page}` export default function App() { return ( <div> <h1>react app</h1> <Page></Page> </div> ); }

ما هي الطريقة الصحيحة لاخفاء المفاتيح والمعلومات المهمة في مشروع create-react-app والحيال دون ظهورها في الشيفرة البرمجية

مرحبا أنا أستخدم redux بالطريقة المعتادة import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // REDUX import { Provider } from 'react-redux'; import store from './redux/store'; ReactDOM.render( <Provider store={store}> <React.StrictMode> <App /> </React.StrictMode> </Provider>, document.getElementById('root'), ); import { createStore } from 'redux'; import rootReducer from './rootReducer'; const store = createStore(rootReducer); export default store; وأبحث عن طريقة للحفاظ على ال state بعد تحديث الصفحة

أواجه مشكلة غريبة ولا أفهم سببها وهي عند الضغط على العنصر li وكأنني أيضا ضغطت على ul أيضا import React from 'react'; export default function App() { return ( <ul onClick={(e) => { console.log('parent'); }} > <li onClick={(e) => { console.log('child1'); }} > list1 </li> <li onClick={(e) => { console.log('child2'); }} > item2 </li> </ul> ); } عند الضغط على list1 أجد child1 parent

في ال class component عند استخدام شيفرة معينة داخل componentDidMount تشتغل لمرة واحدة وانتهى سؤالي هو كيفية تحقيق الكود في الأسفل باستخدام useeffect class MyComponent extends React.PureComponent { componentDidMount() { //...الشيفرة } render() { ... } }

ما هي طريقة react لتعيين التركيز على حقل نصي معين بعد تشغيل المكون؟ يبدو أن التوثيق يقترح استخدام refs ، على سبيل المثال نعيّن ref = "nameInput" في حقل الإدخال الخاص ثم نتصل بـ this.refs.nameInput.getInputDOMNode().focus(); لكن اين يجب ان أستخدم هذا

لدي input يستخدم للبحث وكلما تتغير قيمة ال input أغير ال state الذي يتحكم فيها وبالتالي أعيد الاتصال بال endpoint الخاصة بالبحث وأجلب النتيجة لكن لا أريد أن يكون الأمر في كل تغيير لقيمة ال input لذا أريد تطبيق debounce على الدالة التي تعطى الى onChange import React from 'react'; export default function Search() { const [state, setState] = useState({ text: '', results: null }); const handleChange = (e) => { //هنا اريد تنفيذ مبدأ //debounce } return ( <div> <Input type="text" value={state.text} onChange={handleChange}></Input> </div> ); }

احاول ارسال form data عبر axios لكن يحدث معي هذا الخطأ var body = { userName: 'usertest', userEmail: 'usertest@gmail.com' } axios({ method: 'post', url: '/addUser', data: bodyة headers: { "Content-Type": "multipart/form-data" }, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); Error in posting multipart/form-data. Content-Type header is missing boundary

أريد أن افهم الفرق بين <Route exact path="/" component={Home} /> و <Route path="/" component={Home} /> لا اعرف معنى exact

أقوم بإنشاء تطبيق تفاعل صغير ولا يتم تحميل صوري المحلية. import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="nav-container"> <img src={"/images/logo.png"} /> </div> ); } } export default App; ولكن عند وضع رابط لصورة من الويب تعمل بشكل طبيعي import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="nav-container"> <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.theguardian.com%2Fscience%2F2019%2Fjun%2F17%2Fhow-dogs-capture-your-heart-evolution-puppy-dog-eyes&psig=AOvVaw301sOAJ03NKCdAzUH9jaRM&ust=1616372266433000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCLi7yZyOwO8CFQAAAAAdAAAAABAD" /> </div> ); } } export default App; ما المشكلة ?

أتساءل عن كيفية حماية مسار لصفحة ما مع العلم أنه لدي خادم يوفر تسجيل الدخول وأجلب ال token وأحفظه في ال localStorage <Router> <div> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <Route path="/protected" component={Protected}/> //أريد حماية هذا المسار ان لم يكم المستخدم مسجلا للدخول </div> </Router>

لقد وجدت للتو أنه في react this.setState تعمل في أي مكون async أو يتم استدعاؤها بعد إكمال عمل الدالة التي تم استدعاؤها فيها. وأعلم أيضا ان javascript هو single threaded و setState ليست تجلب البيانات من خادم لجعلها async لقد طرأ هذا التسائل في ذهني لأنه في فترة تعلمي الأولى ل react كنت أجهل هذا وقد أوقعني ذلك في مشكلات كثيرة وجعل مسار التعلم صعب قليلا وأرجو توضيح التسائل وشكرا

لدي مكونان: Parent component Child component كنت أحاول الاتصال بالدالة getAlert من parent component بهذه الطريقة ولكن لم أستطع الحصول على نتيجة: class Parent extends Component { render() { return ( <Child> <button onClick={Child.getAlert()}>Click</button> </Child> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 >Child component</h1> ); } }

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

أحاول تنظيم ال state باستخدام خاصية متداخلة مثل هذا: this.state = { profile: { firstname:"", lastname:"" } } لكن تحديث ال state بهذه الطريقة this.setState({ profile.firstname: "أحمد" }); لا يعمل. كيف يمكن القيام بذلك بشكل صحيح؟

أنا أكتب مكونًا بسيطًا في ES6 (مع BabelJS) ، ووظائف this.setState لا تعمل. Cannot read property 'setState' of undefined ها هو الكود: import React from 'react' class App extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={this.sendContent}>Submit</button> </div> ) } } export default App

أقوم بإنشاء مكون React يقبل مصدر بيانات JSON وينشئ جدولًا قابلًا للفرز. يحتوي كل صف من صفوف البيانات الديناميكية على مفتاح فريد مخصص له ولكن ما زلت أتلقى خطأ: Each child in an array should have a unique "key" prop. Check the render method of TableComponent. هذا هو مكون الجدول <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> مكون TableHeader عبارة عن صف واحد وله أيضًا مفتاح فريد مخصص له. يتم إنشاء كل صف في الصفوف من مكون بمفتاح فريد: <TableRowItem key={item.id} data={item} columns={columnNames}/> وهذا هو مكون ال TableRowItem var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return <td key={this.props.data[c]}>{this.props.data[c]}</td>; }, this); }.bind(this); return ( <tr>{ td(this.props.item) }</tr> ) } });

أحاول تعلم الخطافات وقد جعلتني طريقة useState في حيرة من أمري. أقوم بتعيين قيمة أولية لحالة في شكل مصفوفة. طريقة التعيين في useState لا تعمل معي حتى مع انتشار (...) أو بدون عامل انتشار. لقد قمت بإنشاء api أقوم بالاتصال به وجلب البيانات التي أريد تعيينها في الحالة. import React, { useState, useEffect } from 'react'; export default function Movies() { const initialValue = [ { category: '', photo: '', description: '', id: 0, name: '', rating: 0, }, ]; const [movies, setMovies] = useState(initialValue); useEffect(() => { (async function () { try { // const response = await fetch("http://localhost:5000/movies"); // const json = await response.json(); // const result = json.data.result; const result = [ { category: 'cat1', description: 'desc1', id: '1546514491119', name: 'randomname2', photo: null, rating: '3', }, { category: 'cat2', description: 'desc1', id: '1546837819818', name: 'randomname1', rating: '5', }, ]; console.log('result =', result); setMovies(result); console.log('movies =', movies); } catch (e) { console.error(e); } })(); }, []); return ( <div> {movies.map((movie) => ( <p>{movie.name}</p> ))} </div> ); }

لماذا عندما أنتقل مثلا الى /book/12 ثم أحاول العودة الى /login يختلط الرابط ليصبح بدل أن ينتقل الى http://localhost:3000/login ينتقل الى http://localhost:3000/book/login وهذه هي المكونات التي أستخدمها //index.js import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; ..... export default function index() { return ( <Router> <Switch> <Route title="index" exact path="/"> <Index /> </Route> <Route title="books" exact path="/books"> <Books /> </Route> <Route title="book" exact path="/book/:id"> <Book /> </Route> <Route title="register" exact path="/register"> <Register /> </Route> <Route title="login" exact path="/login"> <Login></Login> </Route> </Switch> </Router> ); } //Navbar.js import React from 'react'; import { Link } from 'react-router-dom'; export default function Navbar() { return ( <div> <Link to="/">Home</Link> <Link to="login">Login</Link> <Link to="register">Register</Link> </div> ); } //Books.js import React from 'react'; import { Link } from 'react-router-dom'; export default function Books({ data }) { return ( <div> {data.map((book) => ( <Link to={`/book/${book.id}`}> {book.title}</Link> ))} </div> ); }

مرحبا لدي مشروع react هيكلته كالتالي -project -node_modules -public -src -components -pages -home -Home.js -util -redux -actions -reducers -store.js -styles -App.js -index.js اذا أردت استخدام action في ملف home.js عليا استديرادها بهذه الطريقة import {homeAction} from "../../redux/actions/homeAction.js" وأحيانا يختلط علي الأمر من كثرة "/../../.." ويجب أن أقوم بالتفكير قبل الاستيراد هل هناك طريقة لتبسيط الأمر ?

مرحبا كيف يمكنني تحديد رقم ال port الذي يمكن أن يشتغل عليه مشروع create-react-app?