我正在嘗試更新狀態值并在輸入欄位中顯示更新后的值，但似乎對我沒有任何作用。
我一直在瀏覽各種文章和答案，但似乎沒有一種方法對我有用，可能是我做錯了什么。
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')
}
}
使成為：
{
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>
</>
}
我想獲得新的價值reviewNoteDisplay和reviewNoteTimeStamp，但我一直歌廳舊值。
uj5u.com熱心網友回復：
您的輸入需要控制輸入，使用value而不是defaultValue這里：
<EditableText
multiline="true"
placeholder="Write a review..."
value={reviewNoteDisplay}
confirmOnEnterKey="true"
onChange={(new_value) => setReviewNoteDisplay(new_value)}
onConfirm={editReview}
/>
我不知道 EditableText 組件，但如果onChange不是在每次擊鍵時觸發，您可能還需要添加：
onKeyUp={(e) => setReviewNoteDisplay(e.target.value)}
或類似的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370878.html
標籤：javascript 反应 下一个.js 使用状态