基于相关记录字段的 React Admin Change 字段答案

【问题标题】：React Admin Change field based on related record field基于相关记录字段的 React Admin Change 字段
【发布时间】：2020-12-23 03:09:22
【问题描述】：

假设我有一个名为“资产”的记录，其中有一列名为 deducitble。一项资产可以有一个保险公司。保险公司有一个布尔字段“allowOtherDeductible”。

在编辑资产时，我希望能够首先检查关联保险公司是否将 allowOtherDeductible 设置为 true。如果是这样，我将允许 deductible 使用 TextInput，如果为 false，则使用 SelectInput。

我怎样才能做到这一点？在有条件地呈现字段时，我看不到获取相关记录字段的方法。

【问题讨论】：

标签： react-admin

【解决方案1】：

我会利用SimpleForm 将record 注入其所有子级这一事实编写一个自定义输入：

const DeductibleInput = ({ record }) => {
    if (!record) return null;
    const { data, loaded } = useGetOne('insurers', record.insured_id);
    if (!loaded) return null; // or a loader component
    return data.otherDeductible 
      ? <NumberInput
          source="deductible"
          parse={val => dollarsToCents(val)}
          format={val => centsToDollars(val)}
        />
      : <SelectInput
          source="deductible"
          parse={val => dollarsToCents(val)}
          format={val => centsToDollars(val)}
          choices={getDeductibleChoices(record.insured_value)}
         />
}

【讨论】：

【解决方案2】：

我最终拉入所有保险公司并在组件加载时加载资产。似乎效率有点低，但我想不出更好的方法：

export const AssetEdit = props => {
  const dataProvider = useDataProvider();
  const [insurers, setInsurers] = useState([]);
  const [asset, setAsset] = useState(null);
  const [otherDeductible, setOtherDeductible] = useState(false);

  useEffect(() => {
    dataProvider.getOne('assets', { id: props.id })
    .then(({ data }) => {
      setAsset(data);
      return dataProvider.getList('insurers', { pagination: { page: 1, perPage: 100 } });
    })
    .then(({ data }) => setInsurers(data))
    .catch(error => {
      console.log(error)
    })
  }, [])

  useEffect(() => {
    if (asset && insurers) {
      const selectedInsurer = insurers.find(insurer => insurer.id === asset?.insurer_id);
      setOtherDeductible(selectedInsurer?.other_deductible);
    }
  }, [insurers])

return (
    <Edit {...props}>
      <SimpleForm>
        {otherDeductible &&
        <NumberInput
          source={'deductible'}
          parse={val => dollarsToCents(val)}
          format={val => centsToDollars(val)}
        />
        }

        <FormDataConsumer>
          {({ formData, ...rest }) => {
            if(!otherDeductible){
              return <SelectInput
                source="deductible"
                parse={val => dollarsToCents(val)}
                format={val => centsToDollars(val)}
                choices={getDeductibleChoices(formData.insured_value)}
              />
            }
          }}
        </FormDataConsumer>
      </SimpleForm>
    </Edit>
)
}

【讨论】：