React中使用useReducer实现表单受控输入出现受控转非受控错误如何解决

• 核心问题出在reducer的返回逻辑：你在所有分支返回新状态时，没有保留原有state的全部属性，只返回了当前修改的字段，导致未被修改的字段直接丢失。
• 比如触发Fetch_data/Fetch_error类型的action时，返回的新状态里没有user字段，此时info.user会变为undefined。而受控输入框的value属性一旦变为undefined，React就会判定该组件从受控状态切换为非受控状态，抛出对应报错。

修改reducer的返回逻辑，每次返回新状态时先展开原有state，再覆盖需要更新的字段，保证state的结构始终完整：

const reducer = (state, action) => {
    switch(action.type){
        case "Fetch_data":
            // 先展开原有state，再更新post
            return {
                ...state,
                post: action.payload
            }
        case "On_change":
            // 先展开原有state，再更新user
            return {
                ...state,
                user: action.payload
            }    
        case "Fetch_error":
            // 先展开原有state，再重置post
            return {
                ...state,
                post: {}
            } 
        default:
            return state  
    }
}

如果需要做双重兜底避免意外，可以在输入框的value属性加空字符串 fallback：

<input type="text" onChange={handleChange} value={info.user ?? ""}/>

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