جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
محمد برزگر
4 سال پیش توسط محمد برزگر مطرح شد
4 پاسخ

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

این کدهای مربوط به 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
تخصص : برنامه نویس Laravel و ReactJS
@SMH118 4 سال پیش آپدیت شد
1

خواهش میکنم.
این به خاطر مسئله 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
تخصص : برنامه نویس Laravel و ReactJS
@SMH118 4 سال پیش مطرح شد
2

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

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

محمد برزگر
تخصص : react js
@mohammadbrzbrz72 4 سال پیش مطرح شد
0

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


Seyyed Mojtaba Hoseyni
تخصص : برنامه نویس Laravel و ReactJS
@SMH118 4 سال پیش آپدیت شد
1

خواهش میکنم.
این به خاطر مسئله 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 هستش.
برای اطلاعات بیشتر میتونید به لینک زیر مراجعه کنید:
اطلاعات بیشتر


محمد برزگر
تخصص : react js
@mohammadbrzbrz72 4 سال پیش مطرح شد
0

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام