الطريقة الصحيحة لتعديل state في React

حسب موقع رياكت الرسمي لا تقم بتعديل this.state بطريقة مباشرة أبدًا، وعليك أن تتعامل معها على أنها غير قابلة للتعديل:

اقتباس

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

وذلك لأن إستخدام التابع push لتعديل this.state قد يسبب أخطاء كثير وقد يؤثر على lifecycle hooks حيث أن دوال مثل componentDidUpdate  لن تعرف أنه قد تم تعديل الحالة state، بينما الطريقة الأفضل هي إستخدام دالة لتعديل الحالة state كالتالي:

this.setState(prevState => ({
  firends: [...prevState.firends, person]
}))

يمكنك أيضًا إستعمال التابع concat لجعل الكود أكثر سهولة وقابل للقراءة أكثر:

this.setState({ 
  firends: this.state.firends.concat([person])
})

إذا قمت بالتعديل مباشرةً على الـ state، لن يقوم React بمعرفة ما حصل. السبب وراء ذلك أنه عند نداء setState، تقوم هذه الدالة أيضاً بإخبار React أن هناك تغير قد حدث، وأن عليه أن يقوم بفحص التطبيق الآن.

أيضاً، React يتبع الـ Functional Programming، ومن قواعدها الأساسية هي التعامل مع كل شئ كأنه immutable، أو بمعنى آخر، غير قابل للتعديل. هذا التصميم مفيد جداً، حيث أنه يحافظ على تنظيم الـ state. لهذا السبب، لا يمكنك إستخدام push على الـ array لأنك بهذا الشكل تقوم بالتعديل عليه. ولكن الأفضل هو إستخدام concat لأنها تقوم بدمج الـ array الحالي مع array جديد.

أخيراً، بالنسبة للكود الذي كتبته، أنصحك أن تبدأ في إستعمال النسخة الجديدة من React التي لا نستخدم فيها الـ Class Components، ولكن نستخدم الـ Functional Components مع الـ Hooks.

مثال:

function MyComponent() {
	const [friends, setFriends] = React.useState([]);

  	const addFriend = friend => setFriends(friends.concat([friend]));
  
  	return ();
}