Reactjs UseReducer多次修改状态

我想这是因为反模式的副作用。我从用户那里获得键盘输入，并使用它来修改状态。由于一个日益复杂的状态，我最近从useState挂钩切换到了useReducer。它与useState挂钩配合得很好。每个键盘输入都会多次打印到屏幕上。但是，对状态的任何键盘修改（不是从事件处理程序更改为状态）都不会显示多个渲染

这是我的密码：

function TextBox() {
    const AppState = {
        /// Manages the state of the lines on the screen
        line: [[]],
        /// Line Index...
        lIdx: 0,
        /// Word Index...
        wIdx: 0,

        caretOn: false, timerOn: true, wordWrap: true,
    }

    const [state, dispatch] = useReducer(modifier, AppState)
    /*
     ...

    */
    return (
        <div id="txtbox" 
            tabIndex="0" 
            ref = {txtBoxRef}
            onKeyDown={(e) => dispatch({type: e.key})} >
                <Lines linesProp={linesParam} />
        </div>
    )
}

函数文本框（）{
常量AppState={
///管理屏幕上行的状态
行：[[]]，
///行索引。。。
lIdx:0，
///单词索引。。。
wIdx:0，
caretOn:false，timerOn:true，wordWrap:true，
}
const[state，dispatch]=useReducer（修饰符，AppState）
/*
...
*/
返回(
分派（{type:e.key}）}>
)
}

减速器：

export default function modifier(state, action)
{
    try {
        /// Stops the caret from blinking...
        const caretState = {
            caretOn: true, timerOn: false, wordWrap: true,
        }

        let values = {
                newLine: [], newLIdx: 0, newWIdx: 0
        }

        const set = val => ({...state, ...caretState, line: val.newLine, 
                lIdx: val.newLIdx, wIdx: val.newWIdx})

        switch (action.type)
        {
            case "Backspace":
             // Calls the Function that handles backspaces 
                // Declare new state values...
                values = Backspace({   /// Modify state values...
                    line: state.line, lIdx: state.lIdx, wIdx: state.wIdx
                })
                /// Update state values...
                return set(values)
            case " ":
            // Calls the fucntion that handles input from the spacebar
                /// Modify state values...
                values = spaceBar({line: state.line, lIdx: state.lIdx, wIdx: state.wIdx})
                /// Update state values...
                return set(values)
            /* .... */
           case "ArrowDown":
                if (state.lIdx < state.line.length)
                    return { ...state, ...caretState, lIdx: state.lIdx + 1}
                break;
            case "Enter":
                values = handleEnterKey({line: state.line, lIdx: state.lIdx, wIdx: state.wIdx})
                return set(values)
            case "text_wrap":
                values = handleWrap ({line: state.line, lIdx: state.lIdx, wIdx: state.wIdx,
                wordWrap: state.wordWrap})
                return {...state, ...values}
            case "hide-caret":
                return {...state, caretOn: state.caretOn=false};
            case "show-caret":
                return {...state, caretOn: state.caretOn=true};
            case "set-timer-on":
                return {...state, timerOn: state.timerOn=true};
            default:
            /// Modify state values...
                values = updateLine(action.type, state.line, state.lIdx, state.wIdx)
                /// Update state values...
                return set(values)
            }
            
    }
        catch (e) {
        console.info(e)
        console.log(state)
    }
}

导出默认函数修饰符（状态、操作）
{
试一试{
///停止插入符号闪烁。。。
常数caretState={
caretOn:对，timerOn:错，wordWrap:对，
}
设值={
换行符：[]，newLIdx:0，newWIdx:0
}
const set=val=>（{…state，…caretState，line:val.newLine，
lIdx:val.newLIdx，wIdx:val.newWIdx}）
开关（动作类型）
{
案例“Backspace”：
//调用处理退格的函数
//声明新的状态值。。。
值=退格（{///修改状态值。。。
行：state.line，lIdx:state.lIdx，wIdx:state.wIdx
})
///更新状态值。。。
返回集（值）
案例“”：
//调用处理空格键输入的函数
///修改状态值。。。
values=spaceBar（{line:state.line，lIdx:state.lIdx，wIdx:state.wIdx}）
///更新状态值。。。
返回集（值）
/* .... */
案例“箭头向下”：
if（state.lIdx

我没有技术知识，但似乎react根本不想让

产生任何副作用。如果您有非基本数据类型。useReducer不会深入检查它是否是同一个对象。避免改变对象，深度复制并返回更新的对象。这与setState类似。useState可以更好地处理变异对象

---

修正：我重写了所有不可变的方法。

除了改变先前状态的

show | hide caret

操作之外（即，

caretOn:state.caretOn=false

和

caretOn:state.caretOn=true

我没有看到任何其他明显的突变/副作用，但我们看不到您的任何实用程序函数在做什么。您能包括

退格

，

空格键

，

HandleInterkey

，

HandleRap

，

更新行吗，等等…函数？@DrewReese，请确定以下是源文件：，