javascript - React hur man använder setState med Map-värde

Jag står helt på bar backe här. Här är den relevanta koden jag har:

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>
    );
    }

Enligt min förståelse ersätter setAbiltiesChecked(newabilitiesCH) de gamla abiltiesChecked och skulle därför få React-komponenten att renderas om, men det är inte alls vad som händer. Tillståndet uppdateras som jag märkte med några konsolloggar, men det uppdateras inte från handleAbilitiesCheck-funktionen.

Jag har en annan funktion som i princip renderar om vid en inmatning i en textruta och det triggar en omrendering av kryssrutorna, men jag behöver att de ska visa att kryssrutan faktiskt klickades på, vad är felet med min kod?

Svar #1

Ditt problem är att du muterar ditt tillståndsobjekt (ditt anrop till state ändrar det aktuella map-objektet), och sedan tilldelar det. React gör en diff på objektet, ser ingen förändring och renderar därför inte om.

I detta specifika fall, ersätt:

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

med

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

Den nya kopian ska erkännas av React som ett nytt tillstånd.