Я пытаюсь создать элемент управления множественным выбором с помощью redux-form и material ui. На самом деле я использую обертку redux-form-material-ui, просто не могу добавить ее как тег.
Вот часть моего кода:
<FormControl fullWidth>
<InputLabel>Shops</InputLabel>
<Field
name = "shops" component = {Select} fullWidth
multiple format = {(value) => (Array.isArray(value) ? value : [])}
renderValue = {(selected) => (
<div className = {classes.chips}>
{selected.map((value) => <Chip key = {value.id} label = {value.name} className = {classes.chip} />)}
</div>
)}
>
{allShops.map((shop) => <MenuItem key = {shop.id} value = {shop}>{shop.name}</MenuItem>)}
</Field>
</FormControl>
где Select - это redux-form-material-uiSelect, allShops - это массив, переданный из внешнего компонента в качестве опоры.
Кажется, что с Everithyng все в порядке, когда этот материал обрабатывается - я правильно отрендерил Chip, соответствующие моему initialValues, но по какой-то причине Menu (или DropdownList или что-то еще, что отображает MenuItems) остается нетронутым этими значениями. Если я попытаюсь выделить некоторые элементы и отменить их выбор - фишки продолжают добавляться и удаляться, пункты меню становятся «выбранными» и «отмененными», но это происходит только с «новыми» магазинами. Как я могу сделать так, чтобы это работало правильно? Мне нужно, чтобы не только чипы правильно отображались в зависимости от initialValues, но и эти MenuItems, чтобы я мог, например, отменить выбор выбранных значений после рендеринга формы. Может кто-нибудь мне помочь? Был бы признателен за это.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я вижу, что вы форматируете значения. Формат подбирает только значения. Если вы переформатируете или удалите форматирование, вы, скорее всего, получите желаемый результат