React管理员（3.6）在创建组件时使用transform。

Question

我试图在我的create组件中添加transform属性。然后在transform里面，我调用一个函数来获取基于地址参数的纬度和长度。

但是在geodecoder完成之前，dataprovider已经在向API发送数据了。

有没有什么办法可以让变换器知道数据已经设置好要发送了？

我对React也很陌生。所以，也许我错过了一些明显的东西。这是我目前的代码。

import * as React from "react";
import {Create, ReferenceArrayInput, SelectArrayInput, SimpleForm, TextInput} from 'react-admin';
import Geocode from "react-geocode";

Geocode.setApiKey("MY_API_KEY");
Geocode.setRegion("nl");

export const StoreCreate = props => {

    function getLatLong(data) {
        const addressObject = data.address;
        if ((addressObject.postal_code.length >= 6 &&
            addressObject.postal_code.length <= 7) &&
            addressObject.street_name.length > 0 &&
            addressObject.housenumber.length > 0
        ) {

            const regex = /^[1-9][0-9]{3}[\s]?[A-Za-z]{2}$/i;
            if (regex.test(addressObject.postal_code)) {
                const address = addressObject.street_name + ' ' + addressObject.housenumber + ' ' + addressObject.postal_code;

                Geocode.fromAddress(address).then(
                    response => {
                        const {lat, lng} = response.results[0].geometry.location;
                        console.log({
                            address: {
                                ...addressObject, ...{
                                    lat: lat,
                                    lng: lng
                                }
                            }
                        });
                        return {
                            address: {
                                ...addressObject, ...{
                                    lat: lat,
                                    lng: lng
                                }
                            }
                        };

                    },
                    error => {
                        console.error(error);
                    }
                );
            }
        }
    }

    const transform = (data) => ({
        ...data,
        ...getLatLong(data)
    });

    return (
        <Create {...props} transform={transform}>
            <SimpleForm>
                <TextInput source="name"/>
                <TextInput source="email" type="email"/>
                <TextInput source="address.street_name"/>
                <TextInput source="address.housenumber"/>
                <TextInput source="address.postal_code"/>
                <TextInput source="address.city"/>
                <ReferenceArrayInput source="store_types" reference="store-types">
                    <SelectArrayInput source="name"/>
                </ReferenceArrayInput>
                <TextInput source="address.lat"/>
                <TextInput source="address.lng"/>
            </SimpleForm>
        </Create>
    );
};

Answer 1

首先，在 getLatLong 函数不返回承诺。

function getLatLong(data) {
    const addressObject = data.address;
    if ((addressObject.postal_code.length >= 6 &&
        addressObject.postal_code.length <= 7) &&
        addressObject.street_name.length > 0 &&
        addressObject.housenumber.length > 0
    ) {
        const regex = /^[1-9][0-9]{3}[\s]?[A-Za-z]{2}$/i;
        if (regex.test(addressObject.postal_code)) {
            const address = addressObject.street_name + ' ' + addressObject.housenumber + ' ' + addressObject.postal_code;

            return Geocode.fromAddress(address).then(
                response => {
                    const {lat, lng} = response.results[0].geometry.location;
                    console.log({
                        address: {
                            ...addressObject, ...{
                                lat: lat,
                                lng: lng
                            }
                        }
                    });
                    return {
                        address: {
                            ...addressObject, ...{
                                lat: lat,
                                lng: lng
                            }
                        }
                    };

                },
                error => {
                    console.error(error);
                    throw error;
                }
            );
        }
    }

    return {};
}

那么，你应该在你的 tranform 职能。

const transform = (data) => getLatLong(data).then((longData) => ({
    ...data,
    ...longData
}));