反应如何将 setState 与 Map 值一起使用答案

【问题标题】：React how to use setState with Map value反应如何将 setState 与 Map 值一起使用
【发布时间】：2020-07-29 22:15:39
【问题描述】：

我在这里不知所措。这是我拥有的相关代码：

const TraitModal = (props) => {
const [abiltiesChecked, setAbiltiesChecked] = React.useState(new Map());
const handleAbilitiesCheck = (e) => {
        var newabilitiesCH=abiltiesChecked.set(e.target.id, e.target.checked);
        setAbiltiesChecked(newabilitiesCH);
    };
return(
<Form>
GetAbilities().map((a) => (
                                        <div key={`custom-${a}-2`}>
                                            <Form.Check
                                                custom
                                                checked={!!abiltiesChecked.get(`abilities-${a}`)}
                                                type="checkbox"
                                                id={`abilities-${a}`}
                                                label={`${a}`}
                                                onChange={handleAbilitiesCheck.bind(this)}
                                            />
                                        </div>
                                    ))}
</Form>
    );
    }

据我了解，setAbiltiesChecked(newabilitiesCH) 替换了旧的 abiltiesChecked，因此会导致 React 组件重新呈现，但这根本不是发生的事情。正如我通过一些控制台日志发现的那样，状态确实得到了更新，但它没有从 handleAbilitiesCheck 函数中得到更新。

我有另一个函数，基本上是在输入到文本框时重新呈现并触发复选框的重新呈现，但我需要它们显示复选框已被实际单击，我的代码有什么错误？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

您的问题是您正在改变您的有状态对象（您对状态的调用会更改当前的地图对象），然后分配给它。 React 对对象执行 diff，看不到任何变化，因此不会重新渲染。

在这种特定情况下，替换：

    var newabilitiesCH=abiltiesChecked.set(e.target.id, e.target.checked);

与

    var newabilitiesCH= new Map(abiltiesChecked).set(e.target.id, e.target.checked);

新副本应该被 React 识别为新状态。

【讨论】：

非常感谢！！