Проблема деструктуризации массива List React Hook Formik - PullRequest
Новая
       7

Проблема деструктуризации массива List React Hook Formik

0 голосов
/ 30 октября 2019

У меня есть страница с формой formik, я передаю в initialValue список профилей (droitsProfil).

В моем списке есть система флажков, когда я нажимаю, я хочу иметь возможность обновить списокdroitsProfil.

Поэтому я настроил handleSwitchChange и setFieldValue, чтобы обновить мой список droitsProfil с новым значением.

Однако это не работает, потому что мне нужна система prestate для обновления только строкимоей линии я щелкнул.

Как я могу сделать, чтобы аккуратно деструктурировать мой droitsProfil с помощью React Hooks

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>
...