Javascript useState钩子无法更新地图

我正在使用useState钩子存储地图

    const [optionList, setOptionsList] = useState(new Map([
        [
            uuidv1(), {
                choice: "",
            }
        ]
    ]));

在添加新选项时，我调用此函数

    const handleAddNewOption = () => {
        console.log('reached here');
        optionList.set(uuidv1(), {
            choice: "",
        });
    }

但列表不会在更新时重新呈现

    useEffect(() => {
    console.log("optionList", optionList)    
}, [optionList]);

---

您需要检索条目数组，然后向其中添加新条目，最后构建一个全新的映射

const handleAddNewOption = () => {
    console.log('reached here');
    const entries = [
        ...optionList.entries(),
        [
            uuidv1(),
            { choice: "" }
        ]
    ];
    setOptionsList(new Map(entries));
}

您也可以考虑使用<代码> UnStuts的回调形式，因此您不必不必要地在每次渲染时创建新的未使用的映射。

---

另一个考虑的选项是使用UUID索引的对象而不是一个映射，如果只是为了便于编码-使用具有反应的映射比理想的要复杂一点。

< P>您需要检索条目数组，然后添加新条目，最后构造一个全新的映射。

const handleAddNewOption = () => {
    console.log('reached here');
    const entries = [
        ...optionList.entries(),
        [
            uuidv1(),
            { choice: "" }
        ]
    ];
    setOptionsList(new Map(entries));
}

您也可以考虑使用<代码> UnStuts的回调形式，因此您不必不必要地在每次渲染时创建新的未使用的映射。

---

另一个考虑的选项是使用UUID索引的对象而不是一个映射，如果只是为了便于编码-使用带有反应的映射比理想的要复杂一点。

反应浅比较旧状态和新状态值来检测是否发生了变化。因为它是同一个映射（映射的项目不进行比较），所以React会忽略更新

您可以从旧地图创建新地图，然后进行更新：

const{useState，useffect}=React；
常量uuidv1=（）=>Math.random（）；//只是为了演示
常量演示=（）=>{
const[optionList，setoptionList]=使用状态（新映射([
[
uuidv1（）{
选择：“，
}
]
]));
const handleddnewoption=（）=>{
log（'reach here'）；
设置选项列表（prevList=>{
const newList=新映射（prevList）；
newList.set（uuidv1（）{
选择：“，
});
返回newList；
});
};
useffect（（）=>{
log（“optionList”，JSON.stringify（[…optionList]）；
}，[optionList]）；
返回(
添加
);
}
ReactDOM.render(
,
根
);
比较旧状态和新状态值，以检测是否有更改。因为它是同一个映射（映射的项目不进行比较），所以React会忽略更新

您可以从旧地图创建新地图，然后进行更新：


const{useState，useffect}=React；
常量uuidv1=（）=>Math.random（）；//只是为了演示
常量演示=（）=>{
const[optionList，setoptionList]=使用状态（新映射([
[
uuidv1（）{
选择：“，
}
]
]));
const handleddnewoption=（）=>{
log（'reach here'）；
设置选项列表（prevList=>{
const newList=新映射（prevList）；
newList.set（uuidv1（）{
选择：“，
});
返回newList；
});
};
useffect（（）=>{
log（“optionList”，JSON.stringify（[…optionList]）；
}，[optionList]）；
返回(
添加
);
}
ReactDOM.render(
,
根
);