همان طور که میتوانید ببینید ما یک ارور ر state در نرم افزار داریم، طراحی اپلیکیشن در مشهد ما همینطور توابعی داریم تا مقادیر ارورها را تغییر تحول دهیم و یا این که آن را reset کنیم. ما مقدار را ارسال می‌کنیم و تابع ریست آن را ریست می نماید. اذن دهید ببینیم چه‌گونه GlobalErr شغل می نماید:
import React, { Component } from \'react\'
class GlobalError extends Component {
render() {
if (!this.props.error) return null
return (
style={{
position: \'fixed\',
top: 0,
left: \'50%\',
transform: \'translateX(-50%)\',
padding: 10,
backgroundColor: \'#ffcccc\',
boxShadow: \'0 3px 25px -10px rgba(0,0,0,0.5)\',
display: \'flex\',
alignItems: \'center\',
}}
>
{this.props.error}
className=\"material-icons\"
style={{ cursor: \'pointer\' }}
onClick={this.props.resetError}
>
close
)
}
}
export default GlobalError
export default GlobalError
همان طور که میتوانید در خط پنج ملاحظه کنید در شرایطی‌که هیچ یک از ارورهای جاوا اسکریپت صورت ندهد ما هیچ چیزی را رندر نمیکنیم، این عمل سبب ساز میگردد که ما نوارهای قرمز‌رنگ خالی نداشته باشیم. دقت داشته باشید که شما میتوانید کارکرد این کامپوننت را تغییر و تحول دهید، از جمله شما میتوانید ‘x’ را با ارور timeout بده بستان نمائید که موقعیت ارورهای جاوا اسکریپت را بعداز سپری شد برهه زمانی هنگامی تغییر و تحول دهد. هم اکنون شما میتوانید هر جایی که خواستید از این global error state به کار گیری فرمایید، برای این شغل صرفا کافی میباشد _setError را از Application.js منتقل فرمایید و آن گاه میتوانید global error را تهیه و تنظیم فرمائید.
یک نمونه دیگر
import React, { Component } from \'react\'
import axios from \'axios\'
class GenericErrorReq extends Component {
constructor(props) {
super(props)
this._callBackend = this._callBackend.bind(this)
}
render() {
return (
Click me to call the backend
)
}
_callBackend() {
axios
.post(\'/api/city\')
.then(result => {
// do something with it, if the request is successful
})
.catch(err => {
if (err.response.data.error === \'GENERIC\') {
this.props.setError(err.response.data.description)
}
})
}
}
export default GenericErrorReq