Estoy tratando de actualizar un valor de estado y mostrar ese valor actualizado en un campo de entrada, pero nada parece funcionar para mí.
He estado revisando varios artículos y respuestas, pero ninguna de las formas parece funcionar para mí, posiblemente esté haciendo algo mal.
const AnswerDetailOptions = ({ options, className, answer_id, last_review_details }) => { const [reviewNoteDisplay, setReviewNoteDisplay] = useState(last_review_details.note) const [reviewNoteTimeStamp, setReviewNoteTimeStamp] = useState(last_review_details.date_time) useEffect(() => { // test }, [reviewNoteDisplay]) const submitReview = async () => { const payload = { note: reviewNote, answer_id } const response = await submitNewReview(payload) //console.log(response) if (response.status === 201) { toast.success('Review saved successfully') setReviewNoteDisplay(() => return response.data.data.note) setReviewNoteTimeStamp(() => return response.data.data.date_time) closeCreateReviewDialog() } else { toast.error('Failed to save review') } }Prestar:
{ reviewNoteTimeStamp ? <> <EditableText multiline="true" placeholder="Write a review..." defaultValue={reviewNoteDisplay} confirmOnEnterKey="true" onChange={(new_value) => setReviewNoteDisplay(new_value)} onConfirm={editReview} /> <p className={classNames(styles.node, styles.reviewTimeStamp)}>{ format(new Date(reviewNoteTimeStamp), 'dd/MM/yyyy, hh:mm a') }</p> <Button onClick={() => setShowReviewHistory(true)}>Review History</Button> </> : <> <p>No reviews added</p> </> } Estoy tratando de obtener el nuevo valor de reviewNoteDisplay y reviewNoteTimeStamp pero sigo obteniendo el valor anterior.
su entrada necesita controlar la entrada, usar el value y no el valor defaultValue aquí:
<EditableText multiline="true" placeholder="Write a review..." value={reviewNoteDisplay} confirmOnEnterKey="true" onChange={(new_value) => setReviewNoteDisplay(new_value)} onConfirm={editReview} /> No conozco el componente EditableText, pero si onChange no se activa con cada pulsación de tecla, es posible que también deba agregar:
onKeyUp={(e) => setReviewNoteDisplay(e.target.value)}o algo como esto.