Riverpod 不需要的小部件重建(我认为)

时间:2021-02-21 07:22:14

标签: flutter riverpod

我正在尝试使用 riverpod 来存储登录时存储在 Firestore 中的用户信息。 我要存储的两条信息是用户的手机号码和他订阅的帐户。 如果这些字段为空,则用户将显示一个 QR 阅读器,该阅读器应读取此信息并将其存储在 Firestore 中,并在本地更新 riverpod

我的用户加载页面如下: 我收到错误 setState() or markNeedsBuild() called during build.。 这是为什么? 我认为这是因为代码正在更新构建方法,同时它仍在构建。 但我对文档的理解是 context.read() 不应该重建小部件。

final subscribedToProvider = ChangeNotifierProvider((_) => SubscribedTo());
final userMobileProvider = ChangeNotifierProvider((_) => UserMobileProvider());

class LandingRouting extends StatelessWidget {
  const LandingRouting({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    User user = context.watch<User>();

    if (user == null) return LoginScreen();

    return FutureBuilder(
      future: FirebaseFirestore.instance.collection('users').doc(user.uid).get(),
      builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) return Loading();

        if (snapshot.hasError)
          return AlertDialog(
            title: Text('Error loading user'),
            content: Text('${snapshot.error.toString}'),
          );
        else {
          Map<String, dynamic> userData = snapshot.data.data();

          if (userData['userType'] == 'baqala') {
            return Theme(data: baqalaTheme, child: const BaqalaHomeScreen());
          } else {
            String subscribedTo = userData['subscribedTo'];
            String mobile = userData['mobile'];

            context.read(userMobileProvider).update(mobile);  // <--
            context.read(subscribedToProvider).update(subscribedTo); // <--

            return Theme(
              data: userTheme,
              child: UserHomeScreen(subscribedTo: subscribedTo, userMobile: mobile),
            );
          }
        }
      },
    );
  }
}

在 QR 页面中,riverpod 值为 null,但 firestore 值不为 null。 因此,上一页中的值没有正确存储在 riverpod 中。 我认为这是因为加载页面中的异常。

我在二维码页面内部的构建方法如下:

final subscribedToProvider = ChangeNotifierProvider((ref) => SubscribedTo());
final userMobileProvider = ChangeNotifierProvider((ref) => UserMobileProvider());

....

  @override
  Widget build(BuildContext context) {

    return Consumer(
      builder: (context, watch, child) {
        String sub = watch(subscribedToProvider).subscribedTo;
        String mob = watch(userMobileProvider).mobile;
        if (sub == null || mob == null) {
          return Column(
            children: [
              Expanded(
                flex: 3,
                child: QRView(key: qrKey, onQRViewCreated: _onQRViewCreated),
              ),
              Expanded(
                flex: 1,
                child: Center(
                  child: (result != null)
                      ? Text('Barcode Type: ${describeEnum(result.format)}   Data: ${result.code}')
                      : Text(
                          // 'Scan your code at your baqala to get your hisab history',
                          'Go to your baqala and request your QR code.\n'
                          'If your baqala has added you as a subscriber, you will be able to see\n'
                          'your account history\n\n',
                          style: TextStyle(fontSize: 18),
                          textAlign: TextAlign.center,
                        ),
                ),
              ),
            ],
          );
        }

        return History2(baqalaUID: sub, mobile: mob);
      },
    );

  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen(
      (scanData) async {
        setState(() => result = scanData);
        List<String> qrcode = scanData.code.split('-');

        context.read(subscribedToProvider).update(qrcode[0]);  // <-- Am I updating correctly
        context.read(userMobileProvider).update(qrcode[1]);

        await FirebaseFirestore.instance.collection('users').doc(CurrentUser.getCurrentUser().uid).update(
          {
            'subscribedTo': qrcode[0],
            'mobile': qrcode[1],
          },
        );
      },
    );
  }

我的提供商:

class SubscribedTo extends ChangeNotifier {
  String _subscribedTo;
  String get subscribedTo => _subscribedTo;

  void update(String subscribedTo) {
    _subscribedTo = subscribedTo;
    notifyListeners();
  }
}

class UserMobileProvider extends ChangeNotifier {
  String _mobile;
  String get mobile => _mobile;

  void update(String mobile) {
    _mobile = mobile;
    notifyListeners();
  }
}

1 个答案:

答案 0 :(得分:0)

您可以在 build 方法中读取状态但不能更改它,因为根 ProviderScope 正在侦听它。这会导致您的错误。

要纠正它,您应该创建一个 firebase 实例提供程序,并在您的用户/firebase 实例完成加载时使用提供程序之间的依赖项来更新状态。