React子组件向父组件传参仅第二次传递正确数据的问题排查

为什么会首次传初始的'abc'值 #

两个固定的React开发逻辑误区直接导致了这个问题：

• 闭包捕获旧状态的陷阱：React的state更新是异步批处理的，你在fetch的回调里调用setUserData(新对象)之后，同一作用域紧挨着执行props.handleUserData(userData)时，当前绑定的userData还是上一次渲染周期的初始值'abc'，根本不会读取到刚传给setUserData的新值。
• 冗余的状态中转：你完全没必要把接口返回的登录数据先存在Login组件的本地state里，再绕一步传给父组件。这层中转不仅没带来实际价值，还硬生生把本来同步的接口返回数据传递流程，改成了等state异步更新的流程，必然出现传旧值的问题。

最小改动修复 #

直接在fetch回调里把接口返回值整理成需要的格式，用临时变量接住，既可以更新本地state，也可以同步传给父组件：

// 原错误代码片段
.then(data => {
  setUserData({
    status: data.status,
    name: data.name,
    token: data.token
  })
  // 这里拿到的是闭包绑定的旧userData，也就是初始的'abc'
  props.handleUserData(userData)
})

// 修复后的代码
.then(data => {
  // 用临时变量存格式化后的登录数据
  const loginData = {
    status: data.status,
    name: data.name,
    token: data.token
  }
  // 本地需要留存的话再更新state
  setUserData(loginData)
  // 直接把临时变量传给父组件，不需要等state异步更新
  props.handleUserData(loginData)
})

可选优化点 #

• 把userData的初始值从无意义的'abc'换成null或者结构匹配的空对象，避免后续逻辑读取属性时出现类型报错。
• 如果后续业务确实需要监听userData的变化再触发其他逻辑，可以搭配useEffect实现，不需要在fetch回调里硬绑定传值逻辑。

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