React结合Redux/Dexie.js时输入异常：重音无法输入、光标跳转

当需要让输入框内容与全局状态（比如Dexie.js存储或Redux）保持同步时，常见的写法会触发以下问题：

问题表现 #

• 无法输入需要两次按键的重音字符（如ï）；
• 光标无法停留在单词中间，输入时会自动跳转到文本末尾。

原实现代码 #

export const Friend = memo(({id}) => {
    const friend = useLiveQuery(() =>
        db.friends.get(id)
    );
    const deleteFriend = useCallback(() => db.friends.delete(id), [id]);
    const changeName = useCallback((e) => db.friends.update(id, {name: e.target.value}), [id]);
    return <>Name: {friend?.name}, Age: {friend?.age} <input value={friend?.name} onChange={changeName} /> <button onClick={deleteFriend}>Delete</button></>
})

问题根源 #

核心原因是异步状态更新导致输入框受控值频繁重置：每次输入触发onChange后，会异步更新数据库，useLiveQuery拉取最新值后重新渲染组件，此时React会用新的friend?.name覆盖输入框的value，打断了输入法的中间状态（比如重音字符的输入过程），同时强制将光标定位到文本末尾。

推荐解决方案 #

方案1：本地临时状态过渡（优先推荐）

让输入框先使用本地状态管理输入内容，在失去焦点或用户主动提交时再同步到全局状态/数据库，避免每次输入都触发异步更新，兼顾输入流畅性和状态同步需求。

export const Friend = memo(({id}) => {
    const friend = useLiveQuery(() => db.friends.get(id));
    // 本地临时状态，初始值从全局状态同步
    const [localName, setLocalName] = useState(friend?.name || '');
    
    // 全局状态变化时，同步更新本地状态（比如其他端修改了该数据）
    useEffect(() => {
        if (friend?.name !== localName) {
            setLocalName(friend?.name || '');
        }
    }, [friend?.name]);

    const deleteFriend = useCallback(() => db.friends.delete(id), [id]);
    // 同步本地状态到数据库
    const syncToDb = useCallback(() => {
        db.friends.update(id, {name: localName});
    }, [id, localName]);

    return (
        <>
            Name: {friend?.name}, Age: {friend?.age}
            <input 
                value={localName} 
                onChange={(e) => setLocalName(e.target.value)}
                onBlur={syncToDb}
            />
            <button onClick={deleteFriend}>Delete</button>
            {/* 可选：添加手动保存按钮 */}
            <button onClick={syncToDb}>Save</button>
        </>
    )
})

方案2：优化受控组件的异步同步逻辑

如果必须实时同步（如多人协作场景），需要手动处理光标位置和输入法中间状态：

1. 记录光标位置，在异步更新后恢复；
2. 用onInput事件记录输入过程，避免打断输入法状态。

export const Friend = memo(({id}) => {
    const friend = useLiveQuery(() => db.friends.get(id));
    const inputRef = useRef(null);
    const [cursorPos, setCursorPos] = useState(0);

    // 实时记录光标位置
    const handleInput = (e) => {
        setCursorPos(e.target.selectionStart);
    };

    const changeName = useCallback(async (e) => {
        const newValue = e.target.value;
        await db.friends.update(id, {name: newValue});
        // 状态更新后恢复光标位置
        if (inputRef.current) {
            inputRef.current.selectionStart = cursorPos;
            inputRef.current.selectionEnd = cursorPos;
        }
    }, [id, cursorPos]);

    const deleteFriend = useCallback(() => db.friends.delete(id), [id]);

    return (
        <>
            Name: {friend?.name}, Age: {friend?.age}
            <input 
                ref={inputRef}
                value={friend?.name} 
                onInput={handleInput}
                onChange={changeName}
            />
            <button onClick={deleteFriend}>Delete</button>
        </>
    )
})

方案3：Dexie专属优化——使用mutate API

Dexie的mutate方法可以直接修改本地缓存并同步到数据库，减少异步查询导致的状态滞后，避免输入框频繁重置。

export const Friend = memo(({id}) => {
    const friend = useLiveQuery(() => db.friends.get(id));
    const [localName, setLocalName] = useState(friend?.name || '');

    const changeName = useCallback((e) => {
        const newValue = e.target.value;
        setLocalName(newValue);
        // 修改本地缓存并同步到数据库
        db.friends.mutate(id, (friend) => {
            if (friend) friend.name = newValue;
        });
    }, [id]);

    // 全局状态变化时同步本地状态
    useEffect(() => {
        if (friend?.name !== localName) {
            setLocalName(friend?.name || '');
        }
    }, [friend?.name]);

    const deleteFriend = useCallback(() => db.friends.delete(id), [id]);

    return (
        <>
            Name: {friend?.name}, Age: {friend?.age}
            <input 
                value={localName} 
                onChange={changeName}
            />
            <button onClick={deleteFriend}>Delete</button>
        </>
    )
})

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