چرا setState انجام نمیشه و مقادیر state تغییر نمیکنه

4 هفته پیش
توسط محمد برزگر آپدیت شد
محمد برزگر ( 15220 تجربه )
4 هفته پیش
تخصص : react js

این کدهای مربوط به index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import * as serviceWorker from './serviceWorker';

class Sho extends React.Component{
    state={
        user:[
            {name:'mohamamd',family:'barzegar'},
            {name:'fazel',family:'mohammady'},
            {name:'ehsan',family:'barzegar'}
        ]
    }

    doIt(){
        this.setState({
            user:[
                {name:'navid',family:'amary'},
                {name:'yasin',family:'nahidi'},
                {name:'esmaeil',family:'heydari'}
            ] 
        });
    }

    render(){
        return(
            <div>
                <button onClick={this.doIt}>button</button>
                <App name={this.state.user[۰].name} family={this.state.user[۰].family} >i live in sari</App>
                <App name={this.state.user[۱].name} family={this.state.user[۱].family} >i live in amol</App>
                <App name={this.state.user[۲].name} family={this.state.user[۲].family}>i live in sari</App>
            </div>
        )
    }
}

ReactDOM.render(<Sho />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

و این کامپوننت state full که در فایل بالایی از این استفاده شده .. من موندم عیبش چیه که خطا میده و جوابی نمیشه گرفت بعد از اینکه کلیک میکنم!

import React,{Component} from 'react';

class App extends Component{

    render(){
        return(
            <div>
                hello my name is {this.props.name} {this.props.family} , and {this.props.children}
            </div>
        );
    }
}

export default App;

و اینم اسکرین شاتی که از ارور گرفتم :

http://uupload.ir/files/wrmb_reactjs-error-۱.jpg

بهترین پاسخ انتخاب شده توسط محمد برزگر
Seyyed Mojtaba Hoseyni
4 هفته پیش

خواهش میکنم.
این به خاطر مسئله this داخل js هستش.
راه دیگه این هستش که شما میتونید از متد های call یا apply استفاده کنید.
به عنوان مثال:

<button onClick={() => this.doIt.apply(this)}>button</button>
<button onClick={() => this.doIt.call(this)}>button</button>

که هر دوحالت جواب میدن و فرقشون در طریقه ی پاس دادن آرگومان ها هستش که فانکشن call آرگومان ها رو یکی یکی میگیره ولی فانکشن apply آرگومان های رو به صورت آرایه میگیره.
البته شما میتونید از bind هم استفاده کنید.

 <button onClick={this.doIt.bind(this)}>button</button>

اما در این مورد بهترین و راحت ترین راه استفاده از arrow function هستش.
برای اطلاعات بیشتر میتونید به لینک زیر مراجعه کنید:
اطلاعات بیشتر

Seyyed Mojtaba Hoseyni ( 4430 تجربه )
4 هفته پیش

سلام
یکی از راه حل ها این هستش که متد doIt رو به شکل arrow function بنویسید.

doIt=()=> {
    this.setState({
      user: [
        { name: "navid", family: "amary" },
        { name: "yasin", family: "nahidi" },
        { name: "esmaeil", family: "heydari" }
      ]
    });
  }
محمد برزگر ( 15220 تجربه )
4 هفته پیش
تخصص : react js

خیلی ممنونم از شما آقای حسینی @SMH118 ..جواب دادش
چرا در اون حالت فانکشن در کلاس جواب نمیده ؟
راه های دیگه ای هم چی هست که بشه ازشون استفاده کرد؟ اگر توضیح بدین یا لینک بدین خیلی ممنون میشم

Seyyed Mojtaba Hoseyni ( 4430 تجربه )
4 هفته پیش

خواهش میکنم.
این به خاطر مسئله this داخل js هستش.
راه دیگه این هستش که شما میتونید از متد های call یا apply استفاده کنید.
به عنوان مثال:

<button onClick={() => this.doIt.apply(this)}>button</button>
<button onClick={() => this.doIt.call(this)}>button</button>

که هر دوحالت جواب میدن و فرقشون در طریقه ی پاس دادن آرگومان ها هستش که فانکشن call آرگومان ها رو یکی یکی میگیره ولی فانکشن apply آرگومان های رو به صورت آرایه میگیره.
البته شما میتونید از bind هم استفاده کنید.

 <button onClick={this.doIt.bind(this)}>button</button>

اما در این مورد بهترین و راحت ترین راه استفاده از arrow function هستش.
برای اطلاعات بیشتر میتونید به لینک زیر مراجعه کنید:
اطلاعات بیشتر

محمد برزگر ( 15220 تجربه )
4 هفته پیش
تخصص : react js

خیلی ممنونم از پاسخت آقا مجتبی لطف کردی @SMH118

برای ارسال پاسخ باید وارد سایت شوید