كيفية تحديث كائن في حالة مكون React؟

هل يمكنك أن ترينا كود Component ﻷن الطريقة اﻷخيرة يفترض أن تكون صحيحة؟ بالنسبة للإسناد إلى this.state فلا يجوز ذلك إلا في الباني وأي تعديل على this.state خارج الباني سيتجاهله الـReactJS ولن تعدل الواجهات وفقاً للتغيير. ذلك بأن this.state ليس متحولاً سحرياً بل هو مجرد object فكيف للـReactJS أن يعلم أنك عدلت عليه؟

بالنسبة لسؤال عن تغيير بنية الكائن فلا لا داعي لتغيير بنية الكائن وكما قلت لك الطريقة اﻷخيرة وهي التالية:

this.setState({person: {name: 'Ahmed'}})

صحيحة والمشكلة في الغالب في بقية كود Component الذي أرجو منك نشره لنحل المشكلة.

إذا كنت  تريد تغير ال state يجب أن تعطيها key مباشر وفي حالتك person وليس person.name وإذا أردت تحديث الإسم فقط وأن تبقي على ال age فأنت تحتاج ال prevState لتكون الطريقة كالآتي: 
 

this.state = {person: { name: 'Adam', age: 22 }}

// الطريقة 
this.setState(prevState => ({
	person: {
      ...prevState.person, // القيمة القديمة 
      name: 'Mohammed' // تعدل الإسم
    }
}));

لقد واجهت مشكلة مماثلة لمشكلتك سابقا لكن بتعقيد أكثر قليلا حيث واجهت تعديل state مماثل لهيكلة هذا

{
    user: { firsname: '', lastname: '' },
    cerdentials: { password: '', confirmPassword: '' },
}

الحل الأول الذي خطر على بالي هو أن أغير باستعمال دالتين

export default function App() {
  const [info, setInfo] = React.useState({
    user: { firsname: '', lastname: '' },
    cerdentials: { password: '', confirmPassword: '' },
  });

  const handleUserChange = (e) => {
    e.persist();
    setInfo((prevState) => ({
      ...prevState,
      user: {
        ...prevState.user,
        [e.target.name]: e.target.value,
      },
    }));
  };
  const handleCerdentailsChange = (e) => {
    e.persist();
    setInfo((prevState) => ({
      ...prevState,
      cerdentials: {
        ...prevState.cerdentials,
        [e.target.name]: e.target.value,
      },
    }));
  };

  console.log(info);

  return (
    <div>
      <input onChange={handleUserChange} type="text" name="firstname" />
      <input onChange={handleUserChange} type="text" name="lastname" />
      <input onChange={handleCerdentailsChange} type="password" name="password" />
      <input onChange={handleCerdentailsChange} type="password" name="confirmPassword" />
    </div>
  );
}

الحل يعمل لا مشكلة لكنه يفرض عليك أساليب في كتابة الشيفرة منافية لمبادئ البرمجة النظيفة فقررت أن أجد حل أخر وتوصلت الى هذا الحل بدالة واحدة 

export default function App() {
  const [info, setInfo] = React.useState({
    user: { firsname: '', lastname: '' },
    cerdentials: { password: '', confirmPassword: '' },
  });

  const handleChange = (e, key) => {
    e.persist();
    setInfo((prevState) => ({
      ...prevState,
      [key]: {
        ...prevState[key],
        [e.target.name]: e.target.value,
      },
    }));
  };
  console.log(info);

  return (
    <div>
      <input onChange={(e) => handleChange(e, 'user')} type="text" name="firstname" />
      <input onChange={(e) => handleChange(e, 'user')} type="text" name="lastname" />
      <input onChange={(e) => handleChange(e, 'cerdentials')} type="password" name="password" />
      <input
        onChange={(e) => handleChange(e, 'cerdentials')}
        type="password"
        name="confirmPassword"
      />
    </div>
  );
}