React中AWS Amplify UI组件无法展示多数据模型信息求助

你遇到的问题核心是Amplify DataStore默认对关联模型采用懒加载，所以booking.Provider返回的是一个Promise，而非直接的Provider对象。下面提供两种可行的解决方法：

方法1：查询时预加载关联数据（推荐） #

通过DataStore.query的include参数，在查询Booking时直接预加载关联的Provider数据，这样返回的booking.Provider会是已解析的对象。

修改你的getBookings函数：

const getBookings = async () => {
  const data = await DataStore.query(Booking, {
    // 预加载关联的Provider模型，as的值要和你Booking模型中关联字段的名称完全一致
    include: [{
      model: Provider,
      as: 'Provider'
    }]
  });
  setBookings(data);
};

之后渲染时就可以直接使用booking.Provider.providerName，同时注意修正代码中key属性的语法错误（缺少大括号）：

return (
  <div>
    {bookings.map(booking => <Bookings booking={booking} provider={booking.Provider} key={booking.id}/>)}
  </div>
);

方法2：手动解析关联数据的Promise #

如果不需要全局预加载，也可以在单个Booking的渲染逻辑中手动解析booking.Provider这个Promise：

创建一个处理单个Booking的子组件：

const BookingItem = ({ booking }) => {
  const [provider, setProvider] = useState(null);

  useEffect(() => {
    const resolveProvider = async () => {
      const resolvedProvider = await booking.Provider;
      setProvider(resolvedProvider);
    };
    resolveProvider();
  }, [booking]);

  // 等待Provider加载完成再渲染
  if (!provider) return <div>加载中...</div>;

  return <Bookings booking={booking} provider={provider} />;
};

然后在App组件中替换原渲染逻辑：

return (
  <div>
    {bookings.map(booking => <BookingItem booking={booking} key={booking.id}/>)}
  </div>
);

额外检查点 #

• 确认你的Data Model关联定义正确：比如Booking模型中是否是belongsTo Provider，Provider模型是否是hasMany Bookings，关联字段的名称要和include中的as值完全匹配。
• 确保本地Amplify模型已经和Studio同步：如果修改过模型，记得运行amplify pull更新本地代码。

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