React Hook中dispatch更新Modal状态存在延迟 数据不同步问题如何解决？

• Redux 异步 action 不会阻塞同步代码执行：你在editButtonHandler中触发getPetDetails请求后，后续代码会立刻执行，此时请求尚未返回，访问到的petDetails是当前渲染周期的旧值，而非本次请求的最新数据。
• 没有监听 Redux 状态更新：请求完成后 Redux 状态会更新触发组件重渲染，但你填充表单、打开弹窗的逻辑只在点击按钮的同步流程中执行一次，不会跟着新的petDetails自动执行。

推荐使用useEffect监听petDetails的变化，数据返回后自动完成表单填充和弹窗打开逻辑，修改后的代码如下：

const PetScreen = () => {
  const dispatch = useDispatch()

  // 从store取宠物详情状态
  const petDetailByUser = useSelector((state) => state.petDetailByUser)
  const { petDetailLoading, petDetails } = petDetailByUser
       
  const [editPetName, setEditPetName] = useState('')

  // 编辑按钮点击只触发请求即可
  const editButtonHandler = (id) => {
    dispatch(getPetDetails(id))
  }

  // 新增useEffect监听宠物详情状态变化
  useEffect(() => {
    // 仅当请求完成且有有效数据时，填充表单打开弹窗
    if (!petDetailLoading && petDetails) {
      setEditPetName(petDetails.editPetName)
      handleEditShow()
    }
  }, [petDetailLoading, petDetails]) // 依赖项必须包含监听的状态
      
  // 弹窗表单部分保持不变
  return (
    <Form.Control
      type='text'
      placeholder='Pet Name'
      name='editPetName'
      value={editPetName}
      onChange={(e) => setEditPetName(e.target.value)}
    />
  )
}

• 弹窗关闭时建议触发重置petDetails的action，同时清空表单状态，避免下次打开弹窗时残留旧数据。
• 如果存在快速点击多个编辑按钮的场景，可以新增一个状态存储当前点击的宠物ID，在useEffect中校验返回的petDetails._id和当前点击ID一致时再执行后续逻辑，避免数据错乱。

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