React useState函数式更新报错：参数类型不兼容问题求助

我正在学习React课程，使用IntelliJ IDEA编写JavaScript代码（未使用TypeScript），编写了如下表单状态管理代码：

const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: ""
})

function titleChangeHandler(event) {
    setUserInput((prevState) => {
        return {
            ...prevState,
            enteredTitle: event.target.value
        }
    })
}

IDE中出现如下错误提示：

Argument type function(any): any & {enteredTitle: any} is not assignable to parameter type ((prevState: {enteredAmount: string, enteredTitle: string, enteredDate: string}) => {enteredAmount: string, enteredTitle: string, enteredDate: string}) | {enteredAmount: string, enteredTitle: string, enteredDate: string}   Type string is not assignable to type undefined     Type function(any): any & {enteredTitle: any} is not assignable to type (prevState: {enteredAmount: string, enteredTitle: string, enteredDate: string}) => {enteredAmount: string, enteredTitle: string, enteredDate: string}

但使用直接更新状态的写法却能正常运行：

function titleChangeHandler(event) {
    setUserInput({
        ...userInput,
        enteredTitle: event.target.value,
    })
}

对应的JSX实现如下：

return (
    <form>
        <div className="new-expense__controls">
            <div className="new-expense__control">
                <label>Title</label>
                <input type="text" onChange={titleChangeHandler} />
            </div>
            <div className="new-expense__control">
                <label>Amount</label>
                <input type="number" min="0.01" step="0.01" onChange={amountChangeHandler} />
            </div>
            <div className="new-expense__control">
                <label>Date</label>
                <input type="date" min="2019-01-01" max="2024-12-31" onChange={dateChangeHandler} />
            </div>
        </div>
        <div className="new-expense__actions">
            <button type="submit">Add Expense</button>
        </div>
    </form>
)

原因与解决方法 #

核心原因 #

IntelliJ IDEA的类型推断机制在处理函数式状态更新时，无法正确识别React合成事件event的生命周期：

1. React合成事件会在事件回调执行完毕后被回收，函数式更新是异步执行的，闭包中引用的event可能已失效；
2. IDE对函数式更新的类型校验更严格，无法推断出异步逻辑中event.target.value的有效类型，因此抛出类型不匹配错误。

而直接更新状态的写法是同步使用event，IDE能直接推断出event.target.value的类型，所以不会报错。

解决方法 #

方法1：提前提取事件值（推荐）

在函数式更新逻辑外部先获取event.target.value，避免闭包中引用失效的合成事件，同时帮助IDE正确推断类型：

function titleChangeHandler(event) {
    const newTitle = event.target.value;
    setUserInput((prevState) => ({
        ...prevState,
        enteredTitle: newTitle
    }));
}

方法2：添加JSDoc类型注释

如果IDE的类型推断仍有问题，可以手动添加JSDoc注释，明确状态和事件的类型：

/**
 * @type {React.Dispatch<React.SetStateAction<{
 *   enteredTitle: string,
 *   enteredAmount: string,
 *   enteredDate: string
 * }>>}
 */
const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: ""
});

/** @param {React.ChangeEvent<HTMLInputElement>} event */
function titleChangeHandler(event) {
    const newTitle = event.target.value;
    setUserInput((prevState) => ({
        ...prevState,
        enteredTitle: newTitle
    }));
}

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