反应状态更新并显示新值

Question

我正在尝试更新状态值并在输入字段中显示更新后的值，但似乎没有任何效果。

我浏览了各种文章和答案，但 none 的方法似乎对我有用，可能是我做错了什么。

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 的新值，但我一直在获取旧值。

Answer 1

你的输入需要控制输入，这里使用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)}

或类似的东西。

反应状态更新并显示新值

React state update and display new value

javascript

reactjs

next.js

use-state