React函数内更新state后立即访问仍为旧值的解决方法

猜测正确性验证 #

你的猜测完全正确。

根本原因 #

React的状态更新通过触发组件重渲染生效，每次组件渲染周期内获取到的state、props都是固定快照。就算你在同一个函数中调用了状态更新方法，只要组件还没有完成重渲染，当前函数上下文里访问到的state/props始终是本次渲染的旧值，这个特性和异步操作的await无关，是React的渲染机制决定的。

现有代码的已知问题 #

你提供的伪代码有几处笔误，可以先排查修正：

• 子组件的函数名错误写为Parent，应该改为Child
• 父组件deleteMessage方法中调用fetchMessages时传入了未定义的response参数，直接调用fetchMessages()即可
• 父组件给子组件传参时fetchMessage拼写错误，应该为fetchMessages
• 子组件点击回调中，deleteMessage内部已经调用过fetchMessages，额外再调用一次属于重复请求，可以删掉

可选解决方案 #

方案1：直接使用接口返回的最新数据（最易实现） #

修改fetchMessages方法把接口返回的最新数据直接返回，不需要等待重渲染从props里取：

// 父组件修改fetchMessages
async function fetchMessages() {
  let response = await // 调用获取消息的REST接口
  setListOfMessages(response);
  return response; // 新增返回接口数据
}

// 子组件点击回调修改
async function handleDeletetButtonClick() {
  await props.deleteMessage(0)
  const newMessageList = await props.fetchMessages()
  // 直接使用返回的新数据，不需要读props
  console.log(newMessageList)
}

方案2：乐观更新（体验最优） #

你现在用的手动更新state的方案属于乐观更新，是生产环境非常常用的优化方案，不属于「临时方案」，可以大幅提升交互流畅度，还可以补充失败回滚逻辑完善健壮性：

// 父组件修改deleteMessage
async function deleteMessage(messageId) {
  // 先更新本地state，立刻响应用户操作
  setListOfMessages(prev => prev.filter(item => item.id !== messageId))
  try {
    await // 调用删除接口
  } catch(e) {
    // 接口调用失败回滚数据，提示用户删除失败
    fetchMessages()
    alert('消息删除失败，请重试')
  }
}

方案3：useEffect监听状态变化 #

如果后续逻辑必须依赖更新后的props/state，可以把逻辑放到useEffect中监听对应状态的变化：

// 子组件新增监听逻辑
useEffect(() => {
  // listOfMessages每次更新后都会执行这里的逻辑
  console.log(props.listOfMessages)
}, [props.listOfMessages])

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