React-Hook-Form结合useParams时数据无法更新问题求助

核心问题 #

你的代码中，监听表单变化的useEffect仅在watch变化时重新执行，但**characterID更新时不会重新创建watch订阅**，导致订阅回调里的characterID是闭包捕获的旧值。此时currentID.current已经更新为新角色ID，两者不相等，所以if条件始终不成立，无法写入localStorage。

修复步骤 #

把characterID加入第二个useEffect的依赖数组，确保每次角色切换时，都会取消旧订阅并创建新订阅，此时回调里的characterID会捕获最新的路由参数值。

修改后的代码 #

const { characterID } = useParams()

// 用useRef存储characterID，用于判断避免数据覆盖
const currentID = useRef<string | undefined>(characterID)

const { watch, reset } = useForm()

useEffect(() => {
    currentID.current = characterID
    // 可优化：先从localStorage读取当前角色已保存的名称，再重置表单
    const savedName = localStorage.getItem(`CharacterName${characterID}`)
    let values = {
        characterName: savedName ? JSON.parse(savedName) : characterInfo.name
    }
    reset({ ...values })
}, [characterID, reset, characterInfo.name])


// 基于watch监听更新localStorage数据的useEffect
useEffect(() => {
    const subscription = watch((data) => {
        if (characterID === currentID.current) {
            localStorage.setItem(`CharacterName${characterID}`, JSON.stringify(data.characterName))
        }
    })
    return () => subscription.unsubscribe()
}, [watch, characterID]) // 新增characterID到依赖数组

额外说明 #

1. 第一个useEffect也建议把reset和characterInfo.name加入依赖，避免因依赖缺失导致的异常渲染。
2. 可以在重置表单时优先读取localStorage中保存的角色名称，切换角色时能加载之前编辑的内容，提升用户体验。

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