React表单首次提交未向Canvas组件传props 需二次提交才可生效

问题原因 #

React的状态更新函数（比如你这里的setTrack）是异步批量执行的，调用setTrack(polData)之后，当前作用域下的track变量不会立刻更新为新值，还是上一次渲染时的旧值。你第一次提交时，刚更新完track就立刻把旧的track传给了Canvas组件，所以组件拿不到最新数据；第二次提交时，track已经是第一次提交后异步更新完成的值，所以看起来就正常了。

解决方案 #

有两种可行的修改方式，选任意一种即可：

方案1：直接传入最新数据（改法最简单，优先级推荐）

不用依赖状态更新后的track变量，直接把你刚处理好的polData传给Canvas组件即可，修改handleSubmit函数的else分支代码：

else {
  polData.unshift(JSON.parse(RefreshRateSelected))
  polData.unshift(datePicker)
  setTrack(polData)
  // 直接传递最新的polData，不需要等track状态更新
  setCanvas(<Canvas data={polData} />)
  return
}

方案2：通过useEffect监听track变化更新Canvas

如果你的业务逻辑需要严格依赖track状态更新后再渲染Canvas，可以把Canvas的更新逻辑抽离到useEffect中，监听track的变化自动触发更新：

1. 首先在组件顶层添加useEffect监听逻辑：

useEffect(() => {
  // 可根据实际需求加非空判断，避免无数据时渲染异常
  if(track) {
    setCanvas(<Canvas data={track} />)
  }
}, [track])

2. 然后删除handleSubmit函数else分支里的setCanvas调用，只保留setTrack即可：

else {
  polData.unshift(JSON.parse(RefreshRateSelected))
  polData.unshift(datePicker)
  setTrack(polData)
  return
}

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