Ինչպես լուծել CommentsEditor կոմպոնենտում հին արժեքի խնդիրը, երբ useState-ը չի արձագանքում մուտքային prop-ի փոփոխությանը: Ինչպես կարելի է օգտագործել useEffect՝ այս խնդիրը լուծելու համար?

CommentsEditor կոմպոնենտում հնացած value-ի խնդիրն առաջանում է, երբ ներսի վիճակը, որը ստեղծվել է useState-ի միջոցով, սկզբից սկսվում է prop-ից, բայց չի թարմացվում այդ prop- ի փոփոխության դեպքում:

Սա տեղի է ունենում, քանի որ useState-ը միայն առաջին ռենդերի ժամանակ է սկսվում, և հետագա փոփոխությունները prop- ի չեն ազդում վիճակի վրա:

Այս խնդիրը լուծելու համար, կարելի է օգտագործել useEffect, որը հետևում է prop- ի փոփոխություններին և թարմացնում է վիճակը:

function CommentsEditor({ value }) {
  const [comment, setComment] = React.useState(value);

  React.useEffect(() => {
    setComment(value);
  }, [value]); // երբ value- ը փոխվում է, թարմացնում ենք վիճակը

  return (
    <textarea value={comment} onChange={e => setComment(e.target.value)} />
  );
}

Այսպիսով, երբ value prop- ը փոխվում է, comment վիճակը թարմացվում է, և կոմպոնենտը ցույց է տալիս արդիական արժեքը։