React中Map状态输入报错：deckInfo.keys is not a function问题排查

核心问题：状态类型被意外转换 #

你遇到的错误deckInfo.keys is not a function or its return value is not iterable，本质是**deckInfo的类型从Map变成了普通JavaScript对象**，而普通对象没有Map专属的keys()方法，因此调用时触发报错。

触发这个问题的关键代码在handleDeckInfoChange函数中：

const handleDeckInfoChange = e => {
    setDeckInfo(prevState => ({
        ...prevState,
        [e.target.name]: e.target.value,
    }))
}

这里你用对象字面量{}和展开运算符...prevState更新状态，但展开Map会将其转换为键值对数组，再被对象字面量处理成普通对象。一旦执行这个更新，后续的deckInfo就不再是Map类型，调用deckInfo.keys()自然会失败。

另外，newCard函数还存在状态突变问题：

function newCard() {
    setDeckInfo(new Map(deckInfo.set("", "")))
}

Map的set方法是可变操作，会直接修改原Map实例，违反了React状态不可变的原则，可能导致意外的渲染异常。

修复方案 #

1. 保持Map类型的状态更新 #

修改handleDeckInfoChange，确保更新后仍返回Map实例：

const handleDeckInfoChange = e => {
    setDeckInfo(prevState => {
        // 创建原Map的副本，避免修改原状态
        const newMap = new Map(prevState);
        // 根据输入框的name和value更新副本
        newMap.set(e.target.name, e.target.value);
        return newMap;
    })
}

2. 修复newCard的状态突变问题 #

创建新的Map副本再添加新条目：

function newCard() {
    setDeckInfo(prevState => new Map(prevState).set("", ""))
}

3. 额外优化：输入框name属性合理性 #

当前EditFlashcard中描述框的name使用了description的值，这可能导致后续更新时键名混乱。建议给每个卡片的topic和description设置明确的唯一标识，避免键名冲突。

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