Как передать начальные значения в Material-UI множественный выбор с помощью чипов с помощью redux-form?

Я пытаюсь создать элемент управления множественным выбором с помощью 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, чтобы я мог, например, отменить выбор выбранных значений после рендеринга формы. Может кто-нибудь мне помочь? Был бы признателен за это.

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

lekhamani 25.06.2019 01:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
764
0

Другие вопросы по теме