React-Admin- ArrayInput/SimpleFormIterator- 如何识别当前记录并将其传递给自定义组件答案

【问题标题】：React-Admin- ArrayInput/SimpleFormIterator- How to identify and pass current record to custom componentReact-Admin- ArrayInput/SimpleFormIterator- 如何识别当前记录并将其传递给自定义组件
【发布时间】：2020-11-24 14:19:37
【问题描述】：

当数组中有多个记录时，我在访问和传递我正在使用的当前记录时遇到问题：

例如：参见下面的 json：整个数组 salesoutdet 正在被传递，而不管我在哪个索引上。

{
  "id":1
  "salesoutdet": [
    {
      "unitprice": 10,
      "quantity": 5,
      "total": 50
    },
    {
      "unitprice": 2,
      "quantity": 1,
      "total": 2
    }
  ]
}

请参阅下面的 ArrayInput。自定义组件 (TotalField) 已嵌入。这应该只传递当前记录，但它传递 SimpleFormIterator 的所有记录。请问我怎样才能做到这一点？

<ArrayInput source="salesoutdet" validate={[required()]}>
  <SimpleFormIterator>
    <ReferenceInput label="Sku" source="sku" reference="products">
      <SelectInput optionText="name" />
    </ReferenceInput>
    <NumberInput label="Quantity" source="quantity" />
    <NumberInput label="Unit Price" source="unitprice" />

    <FormDataConsumer>
      {({
        formData, // The whole form data
        scopedFormData, // The data for this item of the ArrayInput
        getSource, // A function to get the valid source inside an ArrayInput
        ...rest
      }) => {
        //console.log(`getSource: ${JSON.stringify(scopedFormData)}`)
        return scopedFormData ? <TotalField source={getSource('total')} record={scopedFormData} {...rest} /> : null;
      }}
    </FormDataConsumer>
  </SimpleFormIterator>
</ArrayInput>

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

这就是它的实际工作方式。

scopedFormData 包含数组范围内的所有记录。这就是为什么您必须通过 getSource 处理程序传递 source 以便在每次迭代时分配正确的数组索引。

你的问题到底是什么？

如果您在显示正确数据方面需要进一步帮助，请向我们提供 TotalField 组件。

【讨论】：