React表单提交处理器未使用状态变量更新值问题求助

你遇到的是典型的React闭包陷阱，同时伴随组件复用导致的本地状态未同步问题：

• 组件首次挂载时，submitHandler函数会捕获当时的fieldA/B/C初始值；即使后续更新了输入框状态，只要submitHandler没有重新创建，它就一直持有旧的状态引用。
• 另外，useState的初始值仅在组件首次挂载时生效，如果父组件切换editElement时没有卸载/重新挂载Edit组件（比如同路由跳转复用组件），本地状态不会自动更新为新的editElement值，进一步加剧了闭包捕获旧值的问题。

方案1：监听props更新同步本地状态 + 用useCallback确保函数捕获最新状态 #

通过useEffect监听editElement的变化，同步更新本地状态；同时用useCallback包裹submitHandler，让它依赖状态变化时重新创建：

import { useState, useEffect, useCallback } from "react";

export default function Edit({elementList, setElementList, editElement}) {
    const [fieldA, setFieldA] = useState(editElement?.field_a || '')
    const [fieldB, setFieldB] = useState(editElement?.field_b || '')
    const [fieldC, setFieldC] = useState(editElement?.field_c || '')

    // 监听editElement变化，同步本地状态
    useEffect(() => {
        if (editElement) {
            setFieldA(editElement.field_a)
            setFieldB(editElement.field_b)
            setFieldC(editElement.field_c)
        }
    }, [editElement])

    // 用useCallback包裹，依赖状态变化时重新生成函数
    const submitHandler = useCallback(async (event) => {
        event.preventDefault()
        console.log(fieldA)
        console.log(fieldB)
        console.log(fieldC)
        // do stuff with API
        // update elementList using setElementList
    }, [fieldA, fieldB, fieldC])

    return (
        <form onSubmit={submitHandler} id="edit-form">
            <input type="text" value={fieldA} onChange={(event) => setFieldA(event.target.value)} />
            <input type="text" value={fieldB} onChange={(event) => setFieldB(event.target.value)} />
            <input type="text" value={fieldC} onChange={(event) => setFieldC(event.target.value)} />
            <button type="submit">Edit</button>
        </form>
    )
}

方案2：提交时直接从表单元素取值（绕过闭包问题） #

如果不想处理闭包和状态同步的问题，可以直接在提交时从表单DOM元素中获取最新值，不需要依赖本地状态：

import { useState } from "react";

export default function Edit({elementList, setElementList, editElement}) {
    const [fieldA, setFieldA] = useState(editElement?.field_a || '')
    const [fieldB, setFieldB] = useState(editElement?.field_b || '')
    const [fieldC, setFieldC] = useState(editElement?.field_c || '')

    async function submitHandler(event){
        event.preventDefault()
        // 直接从表单元素获取最新值
        const formData = new FormData(event.target)
        const updatedFieldA = formData.get('fieldA')
        const updatedFieldB = formData.get('fieldB')
        const updatedFieldC = formData.get('fieldC')
        
        console.log(updatedFieldA, updatedFieldB, updatedFieldC)
        // do stuff with API
        // update elementList using setElementList
    }

    return (
        <form onSubmit={submitHandler} id="edit-form">
            <input type="text" name="fieldA" value={fieldA} onChange={(event) => setFieldA(event.target.value)} />
            <input type="text" name="fieldB" value={fieldB} onChange={(event) => setFieldB(event.target.value)} />
            <input type="text" name="fieldC" value={fieldC} onChange={(event) => setFieldC(event.target.value)} />
            <button type="submit">Edit</button>
        </form>
    )
}

方案3：强制组件重新挂载（适用于路由场景） #

如果是用React Router导航到编辑页面，可以通过给路由组件添加key属性，让切换不同editElement时强制卸载/重新挂载组件，确保初始状态正确：

在父组件的路由部分：

<Route path="/edit" element={<Edit key={editElement?.id} editElement={editElement} ... />} />

这样每次editElement.id变化时，组件会重新挂载，useState会用新的初始值，同时submitHandler也会重新创建，捕获最新的状态。

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