React Admin:如何将状态传递到转换

Question

我有一个创建媒体的组件，它首先将媒体上传到S3，然后将返回值放入组件的状态：

import { Create, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';
import { Field } from 'react-final-form';
import React, { useState } from 'react';
import { ImageHandler } from './ImageHandler';
import { BeatLoader } from 'react-spinners';

export const MediaCreate = props => {
  const [image, setImage] = useState(null);
  const [isUploading, setIsUploading] = useState(false);

  console.log(image) // <-- this contains the image object after uploading
  const transform = data => {
    console.log(image) // <-- this is NULL after clicking submit
    return {
      ...data,
      key: image.key,
      mime_type: image.mime
    }
  };
  
  return (
    <Create {...props} transform={transform}>
      <SimpleForm>
        <SelectInput source="collection" label="Type" choices={[
          { id: 'gallery', name: 'Gallery' },
          { id: 'attachment', name: 'Attachment' },
        ]}/>
        <ReferenceInput label="Asset" source="asset_id" reference="assets">
          <SelectInput optionText="name"/>
        </ReferenceInput>
        <TextInput source={'name'} />
        
        {isUploading &&
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <BeatLoader
            size={10}
            color={"#123abc"}
            loading={isUploading}
          /> Uploading, please wait
        </div>
        }
        <ImageHandler
          isUploading={(isUploading) => setIsUploading(isUploading)}
          onUploaded={(image) => setImage(image)}
        />
      </SimpleForm>
    </Create>
  );
};

为什么上传后包含该值，image仍为null？如何将我的组件状态传递给transform函数？

Answer 1

这可以通过useRef来实现

export const MediaCreate = props => {
  const [image, setImage] = useState(null);
  const [isUploading, setIsUploading] = useState(false);
  
  const someRef = useRef()
  someRef.current = image

  const transform = data => {
    console.log(someRef.current) // <-- this will not be NULL
    return {
      ...data,
      key: someRef.current.key,
      mime_type: someRef.current.mime
    }
  };