freeCodeCamp/guide/arabic/react/state/index.md

title	localeTitle
State	حالة

حالة

الدولة هي المكان الذي تأتي منه البيانات.

يجب أن نحاول دائمًا جعل ولايتنا بسيطة قدر الإمكان وتقليل عدد المكونات الحميدة. إذا كان لدينا ، على سبيل المثال ، عشرة مكونات تحتاج إلى بيانات من الحالة ، فيجب علينا إنشاء مكون حاوية واحد سيحافظ على الحالة لكلها.

الدولة هي في الأساس مثل كائن عالمي متاح في كل مكان في أحد المكونات.

مثال على مكون فئة جليل:

`import React from 'react';

class App extends React.Component { constructor(props) { super(props);

// We declare the state as shown below 

this.state = { 
  x: "This is x from state", 
  y: "This is y from state" 
} 

} render() { return (

{this.state.x}

{this.state.y}

); } } export default App; `

مثال آخر:

`import React from 'react';

class App extends React.Component { constructor(props) { super(props);

// We declare the state as shown below 
this.state = { 
  x: "This is x from state", 
  y: "This is y from state" 
} 

}

render() { let x1 = this.state.x; let y1 = this.state.y;

return ( 
  <div> 
    <h1>{x1}</h1> 
    <h2>{y1}</h2> 
  </div> 
); 

} } export default App; `

تحديث الدولة

يمكنك تغيير البيانات المخزنة في حالة التطبيق الخاص بك باستخدام طريقة setState على المكون الخاص بك.

this.setState({ value: 1 });

ضع في اعتبارك أن setState غير متزامن لذا يجب توخي الحذر عند استخدام الحالة الحالية لتعيين حالة جديدة. مثال جيد لهذا سيكون إذا كنت ترغب في زيادة قيمة في ولايتك.

الطريق الخطأ

this.setState({ value: this.state.value + 1 });

يمكن أن يؤدي ذلك إلى سلوك غير متوقع في تطبيقك إذا كان الرمز أعلاه يُسمى عدة مرات في نفس دورة التحديث. لتجنب هذا يمكنك تمرير دالة رد اتصال محدث إلى setState بدلاً من كائن.

الطريق الصحيح

this.setState(prevState => ({ value: prevState.value + 1 }));

تحديث الدولة

يمكنك تغيير البيانات المخزنة في حالة التطبيق الخاص بك باستخدام طريقة setState على المكون الخاص بك.

this.setState({value: 1});

ضع في اعتبارك أن setState قد تكون غير متزامنة لذا يجب توخي الحذر عند استخدام الحالة الحالية لتعيين حالة جديدة. مثال جيد لهذا سيكون إذا كنت ترغب في زيادة قيمة في ولايتك.

الطريق الخطأ

this.setState({value: this.state.value + 1});

يمكن أن يؤدي ذلك إلى سلوك غير متوقع في تطبيقك إذا كان الرمز أعلاه يُسمى عدة مرات في نفس دورة التحديث. لتجنب هذا يمكنك تمرير دالة رد اتصال محدث إلى setState بدلاً من كائن.

الطريق الصحيح

this.setState(prevState => ({value: prevState.value + 1}));

الطريق الأنظف

this.setState(({ value }) => ({ value: value + 1 }));

عندما تكون هناك حاجة لعدد محدود من الحقول في كائن الحالة ، يمكن استخدام تدمير الكائن لرمز أنظف.

معلومات اكثر

• رد الفعل - الدولة ودورة الحياة
• رد الفعل - رفع الدولة
• رد الفعل الأصلية - حتى الدولة