遵循本教程https://www.youtube.com/watch?v=QrkkNte1onA&t=742s（2：36：48）。
我正在尝试访问在useState值中找到的承诺：盘子。
下面是我对第三个（也是最后一个useEffect）查询order DataDish的代码（其中包含以下信息：quantity，orderID，orderDishDishId），条件是orderID等于我返回的订单的订单ID。我使用.then（）将菜肴设置为一种状态，但在访问菜肴时，菜肴数据（项目名称、价格等）是一种承诺。（见下图）

import {Card, Descriptions, Divider, List, Button} from 'antd';
import { useEffect, useState } from 'react';
import {useParams} from 'react-router-dom';
import {DataStore} from '@aws-amplify/datastore';
import {Order, OrderDish, User} from '../../models';

const DetailedOrder = () => {
    const {id} = useParams();
    const [order, setOrder] = useState(null);
    const [customer, setCustomer] = useState(null);
    const [dishes, setDishes] = useState([]);

    useEffect(() => {
        DataStore.query(Order, id).then(setOrder);
    }, [id]);

    useEffect(() => {
        if(order?.userID) {
            DataStore.query(User, order.userID).then(setCustomer);
        }
    }, [order?.userID]);

    useEffect(() => {
        if(!order?.id){
            return;
        }
        DataStore.query(OrderDish, c => c.orderID.eq(order.id)).then(setDishes);
    }, [order?.id])

    console.log(dishes);

    return (
        <Card title={`Order #${id}` } style={{ margin: 20 }}>
            <Descriptions bordered column={{ lg:1, md:1, sm:1 }}>
                <Descriptions.Item label="Customer">{customer?.name}</Descriptions.Item>
                <Descriptions.Item label="Customer Address">{customer?.address}</Descriptions.Item>
            </Descriptions>
            <Divider />
            <List 
                dataSource={dishes}
                renderItem={(dishItem) => (
                <List.Item>
                    <div style={{fontWeight: 'bold'}}>{dishItem.Dish.name} x{dishItem.quantity}</div>
                    <div>${dishItem.Dish.price}</div>
                </List.Item>
            )}/>
            <Divider />
                <div style={styles.totalSumContainer}>
                    <h2 style={{fontWeight: '400'}}>Total:</h2>
                    <h2 style={styles.totalPrice}>${order?.total?.toFixed(2)}</h2>
                </div>
            <Divider />
            <div style={styles.buttonsContainer}>
                <Button block type='danger' size='large' style={styles.button}>
                    Decline Order
                </Button>
                <Button block type='primary' size='large' style={styles.button}>
                    Accept Order
                </Button>
            </div>
            <Button block type='primary' size='large'>
                Ready For Pickup
            </Button>
        </Card>
    );
};

const styles = {
    totalSumContainer: {
      flexDirection: 'row',
      display: 'flex',
    },
    totalPrice: {
      marginLeft: 'auto',
      fontWeight: 'bold',
    },
    buttonsContainer: {
      display: 'flex',
      paddingBottom: 30,
    },
    button: {
      marginRight: 10,
      marginLeft: 10,
      color: 'white',
    },
  };

export default DetailedOrder;

console.log（dish）在控制台中返回以下内容：

我试图访问在Dish中找到的数据，但这是一个承诺，无法找出如何将其带入状态。
我已经尝试了另一个.then（），但我不能弄清楚它（刚刚开始与javascript）。我读了异步/等待，但我不知道如何实现它。
如果你可能知道但需要更多的信息，请告诉我。我很乐意提供任何必要的信息。这是我在StackOverflow上的第一个问题，要提出一个“好问题”比我想象的要难得多。
Vadim（youtube视频中的家伙）没有遇到这个问题（2：37：08）。我怀疑这是因为更新放大。但我不是100%肯定。
任何信息都将非常感谢。
感谢阅读！