尝试在 <Create /> 上使用 react-admin 转换功能

Question

我是 react-admin 的新手，我正在尝试构建自定义图片库输入。它应该显示一个带有图像的模态（数据已经被获取并存储在 redux 中）这样用户就可以 select 一个或多个图像（在 selection 上调度一个动作来更新 reducer 的值）和我在 <Create /> 的转换函数中需要这些 selected 图像 ID，这样我就可以在调用 dataProvider 方法之前添加所需的数据。

但我有一个奇怪的问题，这可能是因为我缺乏反应知识。在下面的代码片段中，我尝试获取 useReducers 值，然后将其添加到表单中。

import React, { useReducer, useMemo, useEffect, useCallback } from 'react';
import { Create as Ra_create } from 'react-admin';

const ctxInitialValues = {};

const galleryCtx = React.createContext(ctxInitialValues);

const CreateWithGallery = (props) => {
    const [selectedImages, dispatch] = useReducer((state, { type, payload }) => {
        switch (type) {
            case 'UPDATE_STATE':
                return { ...payload };
            case 'INIT_RECORD':
                return {
                    ...state,
                    [payload]: [],
                };
            default:
                return state;
        }
    }, ctxInitialValues);

    const updateSelection = (record, image, operation) => {
        if (operation === 'add') {
            let newState = {
                ...selectedImages,
                [record]: [...selectedImages[record], image],
            };
            dispatch({
                type: 'UPDATE_STATE',
                payload: newState,
            });
        } else if (operation === 'remove') {
            let newState = {
                ...selectedImages,
                [record]: selectedImages[record].filter((item) => item.id !== image.id),
            };
            dispatch({
                type: 'UPDATE_STATE',
                payload: newState,
            });
        }
    };

    const transformPayload = (data) => {
        let transformed = {
            ...data,
        };
        // but I get {} here
        for (let record in selectedImages) {
            transformed[record] = selectedImages[record].map((item) => ({
                id: item.id,
            }));
        }
        return transformed;
    };

    useEffect(() => {
        console.log(selectedImages);
        // I get fresh values here
    }, [selectedImages]);

    const initializeRecord = (record) => {
        dispatch({
            type: 'INIT_RECORD',
            payload: record,
        });
    };

    return (
        <galleryCtx.Provider
            value={{
                selectedImages,
                updateSelection,
                initializeRecord,
            }}
        >
            <Ra_create {...props} transform={transformPayload}>
                {props.children}
            </Ra_create>
        </galleryCtx.Provider>
    );
};

export { galleryCtx };
export default CreateWithGallery;

当我尝试访问转换函数中的 selectedImages 值时，我得到了 {}，这是初始状态。我已经尝试使用 useCallback 和 useMemo 来确保在每次调度后更改值，但它没有任何区别。这个问题也有类似的行为： React Admin: how to pass state to transform

如何在转换函数中使用状态？

Answer 1

要解决此问题，您可以按照 react-admin docs 中的说明使用 transform prop on。但仍然不清楚，为什么我们不能在 or 上的转换函数中获取状态。

Answer 2

我最终在组件上设置了 transform 道具（在自定义工具栏中）：

 const CustomToolbar = (props: any) => {

        const transform = useCallback((data: any) => {
            return {
                ...data,
                files: something_from_state,
            };
        }, [something_from_state]);


        const handleClick = () => {
        };


        return <Toolbar {...props}>
            <SaveButton
                handleSubmitWithRedirect={handleClick} transform={transform}/>
        </Toolbar>
    };

尝试在 <Create /> 上使用 react-admin 转换功能

Trying to use react-admin transform function on <Create />

reactjs

react-admin

use-reducer

use-context