reactjs - 无法为 react-admin 在 EDIT 模式下使用 ImageField 上传图像

Question

使用 React Admin 我正在为我的一个客户创建一个仪表板，我有一个要求，我必须添加客户的产品，在许多字段中，还有一个 Image 字段，我必须上传在其中提供的图像API 和产品是使用 react-admin 的 CREATE 创建的。

// create product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const CreateProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Create resource="products" basePath="/products">
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image
                    <span >
                      *File size should not exceed 5MB
                    </span>
                  </p>
                }
              >
                <ImageField source="src" title="images" />
              </ImageInput>
            </Grid>
          </Grid>
        </SimpleForm>
      </Create>
    </ThemeProvider>
  );
};

export default CreateProduct;

创建产品后，我也需要编辑该产品，同样，我也需要更新图像。

//Edit Product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const PreviewImage = ({ record }) => (
  <img width={30} src={record} alt="Image Preview" />
);

const EditProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Edit {...props}>
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image
                    <span >
                      *File size should not exceed 5MB
                    </span>
                  </p>
                }
              >
                //<ImageField source="src" title="images" />
                 <PreviewImage /> 
              </ImageInput>
            </Grid>
          </Grid>
        </SimpleForm>
      </Edit>
    </ThemeProvider>
  );
};

export default EditProduct;

EditProduct 的问题是我无法在 ImageInput 内部使用的 ImageField 的帮助下从 URL 记录中获取图像，为了实现这一点，我创建了一个单独的组件 PreviewImage从记录中获取图像并将其呈现在 img标签，但我也想将新图片上传到编辑产品表单。
而且我无法使用 react-admin 中的当前文档来实现这一点。
如果有人知道我如何通过 react-admin 实现此 EDIT 功能，请发布您的解决方案。

Answer 1

这个对我有用

const PreviewImage = ({ record, source }) => {
    if (typeof (record) == "string") {
        record = {
            [source]: record
        }
    }
    return <ImageField record={record} source={source} />
}

....

<ImageInput source="preview">
    <PreviewImage source="src" />
</ImageInput>