flutter - 虽然我有一个类的实例，但无法从 redux 状态事件访问值

Question

我在某些中间件中添加了一些状态。此状态用于为 ListView 构建 ListTiles。当我映射实例时，我无法访问该实例的属性。

我可以在调试器中看到信息:https://imgur.com/a/YTpjBou

但我无法访问该属性，因为它返回 null。我不确定这是因为 future 在它呈现时还没有完成还是什么原因。

这是 home_widget 的构建

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:nasp_portal_app/model/model.dart';

import 'main_drawer.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Image.asset('lib/images/Logo.png', height: 35),
      ),
      drawer: DrawerOnly(),
      body: StoreConnector<AppState, _ViewModel>(
        converter: (Store<AppState> store) => _ViewModel.create(store),
        builder: (BuildContext context, _ViewModel viewModel) => Column(
          children: <Widget>[Expanded(child: ItemListWidget(viewModel))],
        ),
      ),
    );
  }
}

class ItemListWidget extends StatelessWidget {
  final _ViewModel model;

  ItemListWidget(this.model);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: model.tournaments.map((Tournament tournament) {
        return ListTile(
            title: Text(tournament.tournName ?? 'Test'),
            leading: IconButton(
              icon: Icon(Icons.home),
              onPressed: () => print('go to tourney'),
            ));
      }).toList(),
    );
  }
}

class _ViewModel {
  final List<Tournament> tournaments;

  _ViewModel({this.tournaments});

  factory _ViewModel.create(Store<AppState> store) {
    print(store.state.tournaments.length);
    return _ViewModel(tournaments: store.state.tournaments);
  }
}

这是锦标赛的类定义

class Tournament {
  final String tournName;
  final String tournState;
  final String tournCity;
  final double distanceMiles;
  final int startDate;
  final int endDate;
  final int tID;

  Tournament({
    @required this.tournName,
    @required this.tournState,
    @required this.tournCity,
    @required this.distanceMiles,
    @required this.startDate,
    @required this.endDate,
    @required this.tID,
  });

  Tournament copyWith({
    String tournName,
    String tournState,
    String tournCity,
    double distanceMiles,
    int startDate,
    int endDate,
    int tID,
  }) {
    return Tournament(
      tournName: tournName ?? this.tournName,
      tournState: tournState ?? this.tournState,
      tournCity: tournCity ?? this.tournCity,
      distanceMiles: distanceMiles ?? this.distanceMiles,
      startDate: startDate ?? this.startDate,
      endDate: endDate ?? this.endDate,
      tID: tID ?? this.tID,
    );
  }
}

这是我处理异步任务的 redux 中间件

class NearTournamentsMiddleware extends MiddlewareClass<AppState> {
  @override
  void call(Store<AppState> store, dynamic action, NextDispatcher next) {
    if (action is NearTournamentsAction) {
      checkNearTournaments(next);
    }

    next(action);
  }

  void checkNearTournaments(NextDispatcher next) async {
    final tournaments = await _tournamentsInRange();
    for (final tournament in tournaments) {
      next(AddTournamentsAction(
          tournament['TournName'],
          tournament['TID'],
          tournament['TournState'],
          tournament['TournCity'],
          tournament['Distance_Miles'],
          tournament['Start_Date'],
          tournament['End_Date']));
    }
  }

  _tournamentsInRange() async {
    Map currentLocation = <String, double>{};
    var location = Location();

    try {
      currentLocation = await location.getLocation();
      final response = await _checkLocalTournaments(
          currentLocation["latitude"], currentLocation["longitude"]);
      final decoded = jsonDecode(response.body);

      return decoded;
    } on PlatformException {
      currentLocation = null;
    }
  }

  Future<http.Response> _checkLocalTournaments(lat, lng) async {
    var url = 'https://napi.com';
    var body = json.encode({
      'miles': '-1', // -1 for test api
      'lat': lat,
      'lng': lng
    });

    Map<String, String> headers = {
      'Content-type': 'application/json',
      'Accept': 'application/json',
    };

    final response = await http.post(url, body: body, headers: headers);
    return response;
  }
}

这些是我目前的 reducer

import 'package:nasp_portal_app/model/model.dart';
import 'package:nasp_portal_app/redux/actions.dart';

AppState appStateReducer(AppState state, action) {
  return AppState(tournaments: tournamentReducer(state.tournaments, action));
}

List<Tournament> tournamentReducer(List<Tournament> state, action) {
  if (action is AddTournamentsAction) {
    return []
      ..addAll(state)
      ..add(Tournament(
          tournName: action.tournName,
          tournState: action.tournState,
          tournCity: action.tournCity,
          distanceMiles: action.distanceMiles,
          startDate: action.startDate,
          endDate: action.endDate,
          tID: action.tID));
  }

  return state;
}

如何在屏幕截图中正确访问 map 中的值？我知道我有一个基于调试器的实例，但无法获取其属性。

Answer 1

我的问题是我使用的名为 AddTournamentsAction 的 redux 操作我没有像这样使用 this 来引用其构造函数中的类变量:

class AddTournamentsAction {
  final String tournName;
  final String tournState;
  final String tournCity;
  final double distanceMiles;
  final int startDate;
  final int endDate;
  final int tID;

  AddTournamentsAction(
    tournName,
    tournState,
    tournCity,
    distanceMiles,
    startDate,
    endDate,
    tID,
  );
}

要解决这个问题，我只需添加 this 关键字:

class AddTournamentsAction {
  final String tournName;
  final String tournState;
  final String tournCity;
  final double distanceMiles;
  final int startDate;
  final int endDate;
  final int tID;

  AddTournamentsAction(
    this.tournName,
    this.tournState,
    this.tournCity,
    this.distanceMiles,
    this.startDate,
    this.endDate,
    this.tID,
  );
}