firebase - Firebase 更新时 Flutter 的错误行为

Question

我有下面的代码，它从 firestore 读取 baby 名字和投票，并用 thump_up 和 thump_down 按钮表示 Cards 中的信息.

数据在 firebase 数据库更改时更新，但更新错误，例如在下面的屏幕截图中，首先我输入 Karam 婴儿数据，它正确更新，然后我输入'Dana' 婴儿数据，但它用 Karam 婴儿数据创建了另一张卡片(即之前创建的同一张卡片)，但是当输入 Yara 婴儿数据时，正确的卡片有专为这里而生!我想是因为它在列表的末尾!

此外，在上次截屏中，我从数据库中删除了Dana baby 的记录，但删除的是最后创建的卡，是Yara 宝贝!!

同样，一旦我们点击 thumb_up 图标，投票就会在数据库中更新，但不会反射(reflect)在卡片中 :(

main.dart:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'BabyModel.dart';
import 'BabyCard.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp();

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext ctxt) {
    return StreamBuilder(
      stream: Firestore.instance.collection('baby').snapshots(),
      builder: (_, AsyncSnapshot<QuerySnapshot> snapshot) {
        var documents = snapshot.data?.documents ?? [];
        var baby =
        documents.map((snapshot) => BabyData.from(snapshot)).toList();
        return BabyPage(baby);
      },
    );
  }
}

class BabyPage extends StatefulWidget {
  final List<BabyData> allBaby;

  BabyPage(this.allBaby);

  @override
  State<StatefulWidget> createState() {
    return BabyPageState();
  }
}


class BabyPageState extends State<BabyPage> {
  @override
  Widget build(BuildContext context) {

  //  var filteredBaby = widget.allFish.where((BabyData data) {
  //    data.name = 'Dana';
  //  }).toList();

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: SafeArea(
        child: Scaffold(
        body: Container(
        child: ListView.builder(
            itemCount: widget.allBaby.length,
            padding: const EdgeInsets.only(top: 10.0),
            itemBuilder: (context, index) {
              return BabyCard(widget.allBaby[index]);
            })
      ),
    )));
  }
}

BabyModel.dart:

import 'package:cloud_firestore/cloud_firestore.dart';

class BabyData {
  final DocumentReference reference;
  String name;
  int vote;

  BabyData.data(this.reference,
      [this.name,
        this.vote]) {
    // Set these rather than using the default value because Firebase returns
    // null if the value is not specified.
    this.name ??= 'Frank';
    this.vote ??= 7;
  }

  factory BabyData.from(DocumentSnapshot document) => BabyData.data(
      document.reference,
      document.data['name'],
      document.data['vote']);

  void save() {
    reference.setData(toMap());
  }

  Map<String, dynamic> toMap() {
    return {
      'name': name,
      'vote': vote,
    };
  }
}

BabyCard.dart:

import 'package:flutter/material.dart';
import 'BabyModel.dart';

class BabyCard extends StatefulWidget {
  final BabyData baby;

  BabyCard(this.baby);

  @override
  State<StatefulWidget> createState() {
    return BabyCardState(baby);
  }
}

class BabyCardState extends State<BabyCard> {
  BabyData baby;
  String renderUrl;

  BabyCardState(this.baby);

  Widget get babyCard {
    return
      new Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: const Icon(Icons.album),
              title: Text('The ${baby.name} is having:'),
              subtitle: Text('${baby.vote} Votes.'),
            ),
            new ButtonTheme.bar( // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    child: const Icon(Icons.thumb_up),
                    onPressed: () => Firestore.instance.runTransaction((transaction) async {
                       DocumentSnapshot freshSnap =
                           await transaction.get(baby.reference);
                       await transaction.update(
                           freshSnap.reference, {'vote': freshSnap['vote'] + 1});
                }),
                  ),
                  new FlatButton(
                    child: const Icon(Icons.thumbs_up_down),
                    onPressed: () { /* ... */ },
                  ),
                  new FlatButton(
                    child: const Icon(Icons.thumb_down),
                    onPressed: () { /* ... */ },
                  )]))]));
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
          child:  babyCard,
        );
  }
}

下面显示错误的数据添加到卡中，Dana baby not there:

下面显示从卡中删除错误数据，Yara 婴儿卡已被删除，在删除 Dana 婴儿记录时!:

Answer 1

您可以使用常规小部件作为流构建器的单元，而不是使用有状态小部件作为您的单元格。这在某种程度上是该错误的解决方法，但实际上可能无法解决您的问题。