带有嵌套 CheckBoxGroupInput 的 ReferenceInput 表现异常

Question

我已经环顾四周并尝试了各种方法，但我看到的很多 CheckBoxGroupInput 示例只是有一个硬编码的关联选项列表，这有点没用......我的场景是我有一个列表我希望能够与产品相关联的标签，非常常见的东西..

我需要从 postgres 数据库中获取该列表...这部分似乎都可以工作，当我的列表首次呈现在 react-admin 的创建屏幕上时看起来很正常...控件如下所示

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

到目前为止一切都很好..

它按预期呈现了我的列表。我的模式全部根据 ra_data_graphql_simple 的格式设置...出乎意料的是，一旦我单击其中一个标签，它立即向服务器发送一个请求，请求 allProductRealBenefit 查询，过滤器值等于被点击的 id，并将该被点击的标签的副本添加到列表中，这会因重复键错误而破坏控制……我不不明白为什么它会在我点击后发送请求，我不是想保存任何东西只是 assemble 哪些标签将与表单数据一起发送以创建 link 记录，我在初始填充控件后已经拥有所有这些数据..

我猜也许这不应该嵌套在 ReferenceInput 中，但我看不到任何其他方式来用数据库查询结果填充我的选择。我知道这是非常常见的功能，我需要想办法在多个地方使用它，因为这个标记功能应该在多个资源中可用。我也用 AutocompleteArrayInput 试过这个，它有类似的问题，所以我知道问题是我一定错过了一个重要的步骤……如果有人能指出正确的方向，那就太好了。我现在要返回文档，看看我能挖掘出什么！

Answer 1

好的，我要回答我的另一个问题，以防有人像我问的时候一样颠倒过来...我只是没有意识到一些幕后魔术在做什么因此我用错了...而且我发现文档令人困惑

在我上面的示例中...我在参考中的 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 Tools 拯救了我的培根。我不得不跳过图形服务器中的一些环节，让所有这些与数据提供者一起工作，为 GET_MANY 和 GET_REFERENCE_MANY 过滤器值发送回差异内容，但这只是将过滤器参数解析为匹配 sequelize 的预期。我最终会写一个 dataProvider，但这符合现在的要求..

PS.. 我在我的 CheckboxGroupInput 中看到了一些奇怪的行为，当我点击某些东西时它复制了任何被点击的框... 原因是我的架构中的对象类型错误.. . 有一个 Int 与 ID 混合在一起，幸运的是它出现在 Redux Dev Tools 中并引导我解决了问题。

最后.. 我在 Github 中整理了一个示例项目，它将使用 React-Admin、GraphQL、RA_DATA_GRAPHQL_SIMPLE、Sequelize 和 Postgres 数据库，我将对其进行大量评论以为像我这样的人消除一些困惑……干杯！

带有嵌套 CheckBoxGroupInput 的 ReferenceInput 表现异常

ReferenceInput with nested CheckBoxGroupInput behaving strangely

reactjs

graphql

react-admin