javascript - 在 React-Admin 中使用第三方 API 数据填充字段

Question

我们正在使用 ReactAdmin 创建一些表单。其中一种形式可以为用户添加多个地址。为了构建这个表单，我们使用 SimpleFormIterator（在 SimpleForm 中）。我需要做的是使用来自第三方 API 的数据更新地址输入字段。我需要对 API 进行 2 次调用，第一次调用根据用户输入获取地址，然后获取用户从 AutocompleteInput 中选择的地址。

第一个调用工作查找并填充 AutocompleteInput，第二个 API 调用获取数据并更新字段，但 ReactAdmin 不注册新值并且地址的 SAVE 不包含新值。你知道为什么会这样吗？以下是我已经执行的步骤：

1. 添加了自动完成输入，可以让我了解用户输入的内容
2. 检索了多个地址并填充了 AutocompleteInput 建议
3. 设法从用户​​选择的建议中获取数据

获取数据后，我可以使用value属性填充地址字段。我的问题是，由 ReactAdmin 的 SimpleForm 管理的整体数据没有被填充，也没有被发送到服务器。有没有人试过这个？

您可以在下面看到我的代码片段。

const UserCreate = (props) => {
    const [userAddresses, setUserAddresses] = useState({});
    const onUserAddressesChange = (data) => {
        setUserAddresses(data);
    };

    return (<Create {...props}>
        <SimpleForm
            submitOnEnter={false}
            redirect={redirect}>
            <AddressFields
                name='userAddresses'
                value={userAddresses}
                onAddressChange={onUserAddressesChange} />
        </SimpleForm>
    </Create>);
}

const AddressFields = (props) => {
    const { onAddressChange } = props;
    const [address, setAddress] = useState({
        city: '',
        addressLine1: '',
        addressLine2: '',
        addressLine3: '',
    });

    const onAddressIdChange = (addressId) => {
        dataProvider.getAddress(addressId)
            .then((result) => {
                const retrievedAddress = result.data[0];
                const newAddress = {
                    city: retrievedAddress.Field2,
                    addressLine1: retrievedAddress.Field3,
                    addressLine2: retrievedAddress.Field4,
                    addressLine3: retrievedAddress.Field5
                };
                
                setAddress( newAddress );
                onAddressChange( newAddress );
            });
    };

    return (
        <div>
            <ArrayInput source="userAddresses">
                <SimpleFormIterator>
                    <AddressLookupInput
                        onAddressIdChange={onAddressIdChange}>
                    </AddressLookupInput>
                    <AddressInputs address={address} />
                </SimpleFormIterator>
            </ArrayInput>
        </div>
    );
};

class AddressLookupInput extends Component {
    constructor(props) {
        super(props);

        this.onFilterToQuery = this.onFilterToQuery.bind(this);
    }

    onFilterToQuery(searchText) {
        return { searchText };
    }

    render() {
        const { onAddressIdChange } = this.props;
        return (
            <ReferenceInput
                onChange={onAddressIdChange}
                source='addressesSource'
                reference='addressReference'
                label="Address lookup"
                filterToQuery={this.onFilterToQuery}>
                <AutocompleteInput
                    optionValue="id"
                    optionText="addressText"
                ></AutocompleteInput>
            </ReferenceInput>
        );
    }
}

const AddressInputs = ({ address, ...props }) => {
    return (
        <Fragment>
            <TextInput
                label="Address Line1"
                source="addressLine1"
                value={address.addressLine1} />
            <TextInput
                label="Address Line2"
                value={address.addressLine2}
                source="addressLine2" />
            <TextInput
                label="Address Line3"
                value={address.addressLine3}
                source="addressLine3" />
            <TextInput
                label="City"
                value={address.city}
                source="city" />
        </Fragment>
    );
};

标签： javascriptreactjsreact-admin