主页 / coding / 问题 / 79428460
Accepted
Andy
Asked: 2025-02-11 06:26:12 +0800 CST

为什么我收到“运算符‘[]’未针对类型‘Future <Map <String, dynamic >>’定义”

  • 772

我正在尝试使用以下代码从 Supabase 获取单行数据：

// supabase_service.dart
Future<Map<String, dynamic>> fetchTransaction(int id) async {
    return await _supabaseClient
        .from('transactions')
        .select()
        .eq('id', id)
        .single();
  }

我从无状态小部件调用此代码，如下所示：

final int id;
final dbservice = SupabaseService();

  @override
  Widget build(BuildContext context) {
    final transaction = dbservice.fetchTransaction(id);
    // do stuff with result
      Text('TXN ID: ${transaction["id"]}'); // <---error

但是，当我尝试使用“事务”时，出现以下错误：

The operator '[]' isn't defined for the type 'Future<Map<String, dynamic>>'

我无法确定错误是否是因为我尝试错误地访问数据，或者因为我需要在访问之前以某种方式进一步处理数据。

flutter

2 个回答

  1. Best Answer

    正如@thenry回答的那样，该值是从数据库加载的，因此不会立即可用。这就是为什么您的变量是 a Future，以及为什么您不能像使用普通的“now”变量那样访问它。

    您确实无法await在build方法中使用，因为所有 UI 构建都必须同步进行。我希望您考虑一下就能明白：即使在数据加载时，您也必须始终呈现 UI。此时，您通常需要呈现一些显示数据正在加载的 UI 元素。

    Future在 UI 中显示值的最简单方法是将其包装在FutureBuilder：

    Widget build(BuildContext context) {
  final transaction = dbservice.fetchTransaction(id);
    
  return FutureBuilder<List<String>?>(
      future: transaction,
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(
              child: CircularProgressIndicator(),
            );
          case ConnectionState.done:
            if (snapshot.hasError) {
              return Text('ERROR: ${snapshot.error.toString()}');
            } else {
              return Text('TXN ID: ${snapshot.data["id"]}');
            }
          default:
            return Text('Unhandle State');
        }
      },
    ),
}

    所以你可以看到这里我们处理三个主要状态：

    • 如果数据仍在加载，我们将显示CircularProgressIndicator。
    • 如果出现错误，我们会在文本框中显示错误。
    • 如果数据已加载，我们将显示您已尝试显示的值。

    如果这对你来说很新，我还建议你阅读：

    • 2

  2. 您已将其定义fetchTransaction(int id)为一个Future函数，因此在调用它时，您必须添加一个await语句来引用其返回结果。

    例如，

    @override
  Widget build(BuildContext context) {
    final transaction = await dbservice.fetchTransaction(id);
    // do stuff with result
      Text('TXN ID: ${transaction["id"]}'); // <---error

    如果存在的话，这应该允许您访问返回的映射中的键“id”。

    • 0

相关问题