این کدهای مربوط به 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;
و اینم اسکرین شاتی که از ارور گرفتم :
خواهش میکنم.
این به خاطر مسئله 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 هستش.
برای اطلاعات بیشتر میتونید به لینک زیر مراجعه کنید:
اطلاعات بیشتر
سلام
یکی از راه حل ها این هستش که متد doIt رو به شکل arrow function بنویسید.
doIt=()=> {
this.setState({
user: [
{ name: "navid", family: "amary" },
{ name: "yasin", family: "nahidi" },
{ name: "esmaeil", family: "heydari" }
]
});
}
خیلی ممنونم از شما آقای حسینی @SMH118 ..جواب دادش
چرا در اون حالت فانکشن در کلاس جواب نمیده ؟
راه های دیگه ای هم چی هست که بشه ازشون استفاده کرد؟ اگر توضیح بدین یا لینک بدین خیلی ممنون میشم
خواهش میکنم.
این به خاطر مسئله 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 هستش.
برای اطلاعات بیشتر میتونید به لینک زیر مراجعه کنید:
اطلاعات بیشتر
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟