Обновление состояния реакции и отображение нового значения

#javascript #reactjs #next.js #use-state

#язык JavaScript #реагирует на #next.js #состояние использования

Вопрос:

Я пытаюсь обновить значение состояния и отобразить это обновленное значение в поле ввода, но, похоже, у меня ничего не получается.

Я просматривал различные статьи и ответы, но ни один из способов, похоже, не работает для меня, возможно, я делаю что-то не так.

 const AnswerDetailOptions = ({ options, className, answer_id, last_review_details }) =gt; {  const [reviewNoteDisplay, setReviewNoteDisplay] = useState(last_review_details.note)  const [reviewNoteTimeStamp, setReviewNoteTimeStamp] = useState(last_review_details.date_time)   useEffect(() =gt; {  // test  }, [reviewNoteDisplay])   const submitReview = async () =gt; {  const payload = {  note: reviewNote,  answer_id  }   const response = await submitNewReview(payload)  //console.log(response)   if (response.status === 201) {  toast.success('Review saved successfully')   setReviewNoteDisplay(() =gt; return response.data.data.note)  setReviewNoteTimeStamp(() =gt; return response.data.data.date_time)   closeCreateReviewDialog()  } else {  toast.error('Failed to save review')  }  }

Оказывать:

 {  reviewNoteTimeStamp ?   lt;gt;  lt;EditableText   multiline="true"  placeholder="Write a review..."  defaultValue={reviewNoteDisplay}  confirmOnEnterKey="true"  onChange={(new_value) =gt; setReviewNoteDisplay(new_value)}  onConfirm={editReview}  /gt;  lt;p className={classNames(styles.node, styles.reviewTimeStamp)}gt;{ format(new Date(reviewNoteTimeStamp), 'dd/MM/yyyy, hh:mm a') }lt;/pgt;  lt;Button onClick={() =gt; setShowReviewHistory(true)}gt;Review Historylt;/Buttongt;  lt;/gt; :  lt;gt;  lt;pgt;No reviews addedlt;/pgt;  lt;/gt;  }

Я пытаюсь получить новое значение reviewNoteDisplay и reviewNoteTimeStamp , но я продолжаю получать старое значение.

1. вы пробовали это так: setReviewNoteDisplay(response.data.data.note) ?

2. ДА. Я так и сделал, но ничего не работает.

3. где находится поле ввода? я не вижу этого в вашем примере кода.

4. setReviewNoteDisplay(() =gt; return response.data.data.note) является недопустимым кодом, используйте setReviewNoteDisplay(() =gt; response.data.data.note) или setReviewNoteDisplay(response.data.data.note)

5. ваши настройки defaultValue={reviewNoteDisplay} будут обновлены только в том случае, если элемент будет создан заново. я попытаюсь опубликовать решение

Ответ №1:

ваш ввод должен контролировать ввод, использовать value и не defaultValue здесь:

 lt;EditableText   multiline="true"  placeholder="Write a review..."  value={reviewNoteDisplay}  confirmOnEnterKey="true"  onChange={(new_value) =gt; setReviewNoteDisplay(new_value)}  onConfirm={editReview} /gt;

я не знаю компонента EditableText, но если onChange он не срабатывает при каждом нажатии клавиши, вам также может потребоваться добавить:

 onKeyUp={(e) =gt; setReviewNoteDisplay(e.target.value)}

или что-то в этом роде.