Блог

Я много часов осматривался и пробовал разные вещи, но многие примеры, которые я вижу для checkboxGroupInput, просто имеют жестко заданный список связанных вариантов, который немного бесполезен… Мой сценарий здесь заключается в том, что у меня есть список тегов, которые я хочу иметь возможность связать с продуктом, довольно распространенный материал..

мне нужно, чтобы этот список был извлечен из базы данных postgres … и эта часть, похоже, работает, и мой список выглядит нормально при первом отображении на экранах создания для react-admin… Элемент управления выглядит следующим образом

 <ReferenceInput reference="ProductRealBenefit" source="realbenefits" sort={{ field: 'name', order: 'ASC' }}>
     <CheckboxGroupInput source="name" />                                                      
</ReferenceInput>
  

Пока все хорошо..

он отображает мой список так, как ожидалось.. вся моя схема настроена в соответствии с форматом для ra_data_graphql_simple… Что неожиданно, так это то, что как только я нажимаю на один из тегов, он немедленно отправляет запрос на сервер для запроса allProductRealBenefit со значением фильтра, равным идентификатору щелчка, и добавляет дубликат этого нажатого тега в список, который нарушает управление с ошибкой дублированного ключа … я не понимаю, почему он будет отправлять запрос после того, как я все равно нажму, я ничего не пытаюсь сохранить, просто соберите, какие теги будут отправлены с идентификатором щелчка. формируйте данные для создания записей ссылок, и у меня уже есть все эти данные после первоначального заполнения элемента управления..

я предполагаю, что, возможно, это не должно быть вложено в ReferenceInput, но я не вижу другого способа заполнить мои варианты результатом запроса к базе данных. Я знаю, что это смехотворно распространенная функциональность, и мне нужно будет найти способ использовать это в нескольких местах, потому что эта функциональность тегирования должна быть доступна в нескольких ресурсах.. Я также пробовал это с AutocompleteArrayInput, и у него были похожие проблемы, поэтому я знаю, что проблема в том, что я, должно быть, пропускаю важный шаг…. Было бы здорово, если бы кто-то мог указать be в правильном направлении. сейчас я возвращаюсь к документам, чтобы посмотреть, что я могу откопать!

Хорошо, я собираюсь ответить еще на один из моих вопросов на случай, если кто-нибудь попадет сюда в таком же перевернутом состоянии, как и я, когда я задавал его… Я просто не понимал, что делает какая-то закулисная магия, поэтому я использовал это неправильно… И я нахожу документы запутанными

В моем примере выше … мои ProductRealBenefits в ссылке были отношением «один ко многим», представленным в моей схеме с помощью realbenefits: [ProductRealBenefits]… Поэтому мне понадобились следующие компоненты.

 <ReferenceArrayInput label="Real Benefit Tags" source="realbenefitsIds" reference="ProductRealBenefit">
    <CheckboxGroupInput  optionValue="id" optionText="name" allowEmpty />
</ReferenceArrayInput>
  

В ra_data_graphql_simple dataProvider есть небольшая магия, которая создает для вас элемент в состоянии с именем realbenefitsIds, который вы используете в качестве источника для ReferenceArrayInput, я пытался использовать фактический объект массива realbenefits, и это не сработало. Я не смог найти никаких хороших примеров или каких-либо достойных объяснений о том, как заставить это работать… Так что в конечном итоге именно инструменты Redux Dev спасли меня здесь. Мне пришлось перепрыгнуть через несколько обручей на графическом сервере, чтобы заставить все это работать с dataprovider, отправляющим обратно разные параметры для значений фильтров GET_MANY и GET_REFERENCE_MANY, но это был всего лишь вопрос анализа аргументов фильтра, чтобы соответствовать тому, что ожидал sequelize. В конечном итоге я напишу dataProvider, но на данный момент это соответствует всем требованиям..

PS .. я наблюдал какое-то странное поведение в моем checkboxGroupInput, когда я что-то нажимал, это дублировало любое поле, на которое был нажат… Причиной этого была ошибка в типе объекта в моей схеме… Там был Int, смешанный с ID, и, к счастью, это обнаружилось в Redux Dev Tools и привело меня к проблеме.

Наконец.. Я собираю пример проекта в Github, который будет использовать React-Admin, GraphQL, RA_DATA_GRAPHQL_SIMPLE, Sequelize и базу данных Postgres, и я буду много комментировать это, чтобы устранить некоторую путаницу для таких, как я… Приветствия!!