React admin (3.6) 在创建组件上使用转换

Question

我正在尝试将转换属性添加到我的创建组件中。然后在转换内部，我调用一个函数来根据地址参数获取纬度和经度。

但在地理解码器完成之前，数据提供者已经将数据发送到 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 函数没有 return 承诺。

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
}));

React admin (3.6) 在创建组件上使用转换

React admin (3.6) working with transform on Create component

javascript

reactjs

react-admin