اشکال در state

vahidxr

سلام دوست عزیز

در مورد سوال اولتون درسته غیر از  persons در state چیز دیگه ای نداریم اما اگه بخوایم از این state استفاده کنیم باید بنویسیم this.state.persons اما بجاش اقای قربانی اومدن از ecmascript استفاده کردن و بجای اینکه مدام بنویسیم this.state.persons فقط مینویسیم persons درواقع همان کدی که شما گذاشتید که به لطف es کار ما راحت تر شده و اگر state دیگه ای داشته باشیم کافیه به همون متغیر const اضافش کنیم !

در مورد سوال دومتون در کامپوننت های کلاسی اگر state را در constructorصدا بزنیم باید از this استفاده کنیم اما خارج از constructor نیازی نیست و نتیجه هم یکسان خواهد بود و تفاوتی ندارد . اون this  هم به همین کلاس اشاره میکنه 

در مورد کلاس ها و es تحقیق کنید و یادشون بگیرین چون خیلی کمکتون میکنه چه در react چه ... !

AmirMohammadian

با سلام و ممنون از پاسختون . چون عادت کردیم جناب قربانی دیر به دیر پاسخ میدن منم یکم دیر شد تشکر کردنم .  : -)

یه سوالی که داشتم در مورد متد handlePersonChange که وقتی روی دکمه کلیک می کردیم نام ها عوض می شدن . من عین کد های آقای قربانی رو زدم و وقتی کلیک میکنم عوض میشن ولی وقتی دوباره کلیک می کنم به حالت اول بر نمیگردن و هیچ رویدادی انجام نمیگیر ه . این هم کد هام : 

import React, { Component } from 'react';

import Person from './components/Person/Person';


class App extends Component {
    state = { 
        persons : [
            {firstname : "امیر",lastname : "امیری"},
            {firstname : "آی هان",lastname : "صدری"},
            {firstname : "رضا",lastname : "کریمی"}
        ]
     };
    
     handlePersonChange = () =>{
         this.setState({
            persons : [
                {firstname : "نسیم",lastname : "نسیمی"},
                {firstname : "آیدا",lastname : "آلی"},
                {firstname : "بابک",lastname : "خوش زبان"}
            ]
         })
     }
    render() { 
        const {persons} = this.state;
        return (  
            <div>
               {persons.map(person => (
                    <Person
                    firstname = {person.firstname}
                    lastname = {person.lastname}
                    />
                    ))}
                    <hr/>
               <button onClick = {this.handlePersonChange}>Change</button>
            </div>
        );
    }
}
export default App;

یونس قربانی

سلام دوست من

دلیل برنگشتن به حالت اول این هست که رویدادی که نوشتیم کلا state رو تغییر میده