Amplify与React：创建表单无法关联已有关联项的问题咨询

问题说明 #

我是Amplify和React领域的新手，目前遇到以下问题：我有两个呈1:1关系的数据模型，在自动生成的创建表单中，无法找到关联已有PickupAddresses的选项；但在Amplify Studio的内容管理模块中，创建表单却带有“添加项目”的关联功能，我希望复刻该功能，且未找到相关文档。

数据模型代码 #

type ShippingLabel @model @auth(rules: [{allow: owner}]) {
  id: ID!
  ordernumber: String!
  addressline1: String
  addressline2: String
  city: String
  postalcode: String
  country: String
  status: deliverystatus
  customerName: String
  customerPhone: AWSPhone
  customerEmail: AWSEmail
  customerNotes: String
  PickupAddresses: PickupAddresses @hasOne
}

type PickupAddresses @model @auth(rules: [{allow: owner}]) {
  id: ID!
  addressline1: String
  addressline2: String
  city: String
  postalcode: String
  country: String
}

表单对比 #

• 自动生成表单：无关联取件地址选项
• Amplify Studio内容管理表单：可搜索并添加取件地址

解决方案 #

自动生成的表单组件默认仅基于模型的直接字段渲染，不会自动处理关联模型的选择逻辑，需要手动扩展实现：

1. 获取已有PickupAddresses数据 #

在组件中通过Amplify DataStore查询所有已创建的取件地址，供用户选择：

import { useState, useEffect } from 'react';
import { DataStore } from 'aws-amplify';
import { ShippingLabel, PickupAddresses } from '../models';
import { createShippingLabelForm } from '../ui-components';

export default function CreateShippingLabel() {
  const [pickupAddresses, setPickupAddresses] = useState([]);
  const [selectedPickupId, setSelectedPickupId] = useState('');

  // 加载所有取件地址
  useEffect(() => {
    const fetchAddresses = async () => {
      const addresses = await DataStore.query(PickupAddresses);
      setPickupAddresses(addresses);
    };
    fetchAddresses();
  }, []);

2. 自定义表单提交逻辑 #

提交表单时，将选中的取件地址ID通过自动生成的外键字段关联到ShippingLabel：

// 处理表单提交
  const handleSubmit = async (formData) => {
    try {
      await DataStore.save(
        new ShippingLabel({
          ...formData,
          // @hasOne关系会自动生成PickupAddressesID外键字段
          PickupAddressesID: selectedPickupId
        })
      );
      console.log('运单标签创建成功');
      // 可添加跳转或重置表单逻辑
    } catch (err) {
      console.error('创建失败:', err);
    }
  };

3. 添加关联选择组件 #

隐藏自动生成的无效关联字段，手动添加选择器：

return (
    <div>
      <h2>创建运单标签</h2>
      {/* 渲染自动生成的表单，隐藏无效的关联字段 */}
      {createShippingLabelForm({
        onSubmit: handleSubmit,
        fields: {
          PickupAddresses: { hidden: true }
        }
      })}
      
      {/* 手动添加取件地址选择器 */}
      <div style={{ margin: '20px 0', display: 'flex', alignItems: 'center' }}>
        <label style={{ marginRight: '10px' }}>关联已有取件地址：</label>
        <select
          value={selectedPickupId}
          onChange={(e) => setSelectedPickupId(e.target.value)}
          style={{ padding: '8px', minWidth: '250px' }}
        >
          <option value="">请选择</option>
          {pickupAddresses.map(address => (
            <option key={address.id} value={address.id}>
              {address.addressline1}, {address.city} {address.postalcode}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

4. 实现Studio式搜索选择（可选） #

如果需要类似Studio的搜索筛选功能，用Amplify UI的Autocomplete组件替换下拉框：

import { Autocomplete } from '@aws-amplify/ui-react';

// ... 替换select部分
<Autocomplete
  label="关联已有取件地址"
  options={pickupAddresses.map(address => ({
    label: `${address.addressline1}, ${address.city} ${address.postalcode}`,
    value: address.id
  }))}
  onChange={({ value }) => setSelectedPickupId(value)}
  style={{ width: '300px', marginTop: '10px' }}
/>

内容的提问来源于stack exchange，提问作者vikasjagtap96