解构arrayList的问题React Hook Formik

Question

我有一个带有formik形式的页面，我向InitialValue传递了一个配置文件列表（droitsProfil）。

在我的列表中，我有一个复选框系统，当我单击时，我希望能够更新列表droitsProfil。

因此，我设置了handleSwitchChange和setFieldValue，以使用新值更新我的droitsProfil列表。

但是它不起作用，因为我需要一个prevstate系统来仅更新我单击的行中的行。

如何使用React Hooks干净地分解droitsProfil

droitsProfil看起来像这样：

[
{ID: "1", libelle: "libelle1", checked: true, …},
{ID: "2", libelle: "libelle2", checked: false, …},
{ID: "3", libelle: "libelle3", checked: false, …}
....
]

我在表单呈现中显示列表

<List>
    {values.droitsProfil.map(option => {    
            const handleSwitchChange = event => {
                const newListeDroitsProfil = values.droitsProfil.map(
                    droit => {
                        if (droit.ID === option.ID) {
                            return {
                                ...option,
                                checked: event.target.checked,
                            };
                        }
                    },
                );

                setFieldValue(
                    'droitsProfil',
                     newListeDroitsProfil
                );  
            };

            return (
                <ListItem
                    value={option.DRT_ID}
                    style={styles.spacesOn}
                >
                    <ListItemText
                        primary={option.libelle}
                    />
                    <ListItemSecondaryAction>
                        <Switch
                            color="primary"
                            checked={option.checked}
                            onChange={handleSwitchChange}
                        />
                    </ListItemSecondaryAction>
                </ListItem>
            );          
    })}
</List>