React更新state后无法在输入框显示最新值问题排查

1. 修正setState更新语法错误 #

你当前的状态更新写法属于非法箭头函数语法，缺少函数体花括号，会直接抛出语法错误，导致状态更新逻辑终止：

// 错误写法
setReviewNoteDisplay(() => return response.data.data.note)
setReviewNoteTimeStamp(() => return response.data.data.date_time)

修改为以下任意一种合法写法即可：

// 写法1：直接传值（无依赖旧状态场景优先用这个）
setReviewNoteDisplay(response.data.data.note)
setReviewNoteTimeStamp(response.data.data.date_time)

// 写法2：补全updater函数的花括号
setReviewNoteDisplay(() => { return response.data.data.note })
setReviewNoteTimeStamp(() => { return response.data.data.date_time })

2. 将EditableText改为受控组件 #

你当前给EditableText传的是defaultValue，这是非受控组件属性，仅首次渲染生效，后续state更新不会同步到输入框，替换为受控属性value：

<EditableText 
  multiline="true"
  placeholder="Write a review..."
  value={reviewNoteDisplay} // 把defaultValue改成value
  confirmOnEnterKey="true"
  onChange={(new_value) => setReviewNoteDisplay(new_value)}
  onConfirm={editReview}
/>

3. 同步props更新到内部state #

你仅在useState初始化时读取了props的last_review_details，如果父组件传入的这个props发生变化，内部state不会同步更新，新增useEffect处理同步：

useEffect(() => {
  setReviewNoteDisplay(last_review_details.note)
  setReviewNoteTimeStamp(last_review_details.date_time)
}, [last_review_details])

4. 修正payload的变量名错误 #

构造请求参数时使用的reviewNote变量未定义，按你的状态命名，应该是写错了变量名：

const payload = {
  note: reviewNoteDisplay, // 替换reviewNote为reviewNoteDisplay
  answer_id
}

内容的提问来源于stack exchange，提问作者Ayan