Question

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

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函数得到更新。

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

Answer 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应该将新副本识别为新状态。

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

1 个答案: