【问题标题】:How to populate <SelectInput> choices with already fetched data如何使用已获取的数据填充 <SelectInput> 选项
【发布时间】:2018-06-28 02:37:15
【问题描述】:

在我的 App 组件中,我有一个带有编辑组件的订阅资源:

<Resource name="subscriptions" list={SubscriptionList} edit={SubscriptionEdit} />

SubscriptionEdit 看起来像这样:

 export const SubscriptionEdit = props => (
  <Edit title={<SubscriptionTitle />} {...props}>
    <TabbedForm >
      <FormTab label="Info">
        ...

        <SelectInput
          source="typeSubscription"
          choices={[
            { id: 'monthly', name: 'Monthly' },
            { id: 'anual', name: 'Anual' },
          ]}
          label="Subscription plan"
        />
      </FormTab>
    </TabbedForm>
  </Edit>
);

当您进入此视图时,从端点获取的数据是这样的 JSON:

{
  id: 1,
  typeSubscription: null,
  selectedDay: null,
  daysAvailable: [
      { id: '07-01-2018', name: 'First day` },
      { id: '07-03-2018', name: 'Second day` },
      { id: '07-07-2018', name: 'Third day` },
      { id: '07-08-2018', name: 'Fourth day` },
  ],
}

我需要做的是使用 daysAvailable 数组为选项添加另一个 SelectInput,以便为“selectedDay”选择日期。

<SelectInput
      source="selectedDay"
      choices={NEED TO ADD daysAvailable HERE!}
      label="Select an available day"
 />

这些数据已经在商店和记录道具中可用,但我不知道如何在选择中正确使用它。尝试像道具一样直接使用它会导致不同的错误,我认为这是正常的,因为我在搞乱 redux 和 admin-on-rest 的内部。

我尝试使用 ReferenceInput 并将 SelectInput 的选项留空,如文档建议的那样,但由于此天数列表会根据用户的 ID 发生变化,因此我找不到将此参数添加到新资源的方法。

我正在使用 admin-on-rest,但如果相关的话,我计划在不久的将来升级到 react-admin。

也就是说,我们将不胜感激。

干杯!

【问题讨论】:

    标签: reactjs redux admin-on-rest


    【解决方案1】:

    这就是ReferenceInput 的用途。您可以提供资源的名称,如下所示:

    import { ReferenceInput, SelectInput } from 'react-admin'
    
    <ReferenceInput label="Post" source="post_id" reference="posts">
        <SelectInput optionText="title" />
    </ReferenceInput>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-06-04
      • 1970-01-01
      • 1970-01-01
      • 2021-10-21
      • 1970-01-01
      • 2021-12-04
      • 2015-05-18
      • 2012-09-11
      相关资源
      最近更新 更多