列表中的状态未更新，Flutter Provider

Question

. Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 14 hours . GrandMagus is looking for an .

When I try to update a list, I have 2 issues, one method (Method 1 below) only updates the data I'm passing and the rest of the data is null and I have the error Null check operator used on a null value , so my widget breaks when I listen to changes. The other method (Method 2 below) has issues because I can not specify where in the list should I update the data and I get an error Illegal assignment to non-assignable expression. Missing selector such as '.identifier' or '[0]'. Try adding a selector. Illegal assignment to non-assignable expression. Missing selector such as '.identifier' or '[0]'. Try adding a selector. So I'm not sure what do now, what am I missing. The code:

Method 1:

List<ItemData>? _items = [];

List<ItemData>? get items => _items;

//Updates only the price and the other data in the state goes null
updatePrice(ItemData price) {
    _items![_items!.indexWhere((element) => element.itemId == price.itemId)] = price;
    notifyListeners();
  }

Method 2:

List<ItemData>? _items = [];

List<ItemData>? get items => _items;

updatePrice(ItemData price) {
// I can't use this since I have to add an selector and I don't understand how
    _items!.firstWhere((element) => element.itemId == price.itemId) = price;
    notifyListeners();
  }

The API call:

 Future<ItemData> patchFee(
      currency, fee, itemId, transactionId) async {
    final response = await (ApiRequest(Method.PATCH, '/items',
        body: jsonEncode({
          "itemId": itemId,
          "transactionId": transactionId,
          "fees": [
            {
              "currency": currency,
              "type": "EXPENSE",
              "fee": fee,
              "description": "Item price",
            }
          ],
        })));
    Map<String, dynamic> jsonDecodedResponse =
        jsonDecode(utf8.decode(response!.bodyBytes));
    var list = jsonDecodedResponse['data']['fees'] as List;
    List<Fees> feesList = list.map((i) => Fees.fromJson(i)).toList();
    return ItemData(
      itemId: jsonDecodedResponse['data']['itemId'],
      transactionId: jsonDecodedResponse['data']['transactionId'],
      fees: feesList,
    );
  }

Action for the API call:

final itemStore = Provider.of<ItemStore>(context, listen: true);

...

TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () async {
       final response = await patchFee(
      USD, 300, 123, 333);

      itemStore.updatePrice(response);
},
            child: const Text('Update Price'),
          ),

The patch goes through with status 200, I listen to the changes with final itemStore = Provider.of<ItemStore>(context, listen: true);, so I assume the error is that I'm updating the state with my updatePrice(price) method wrong, but can't seem to figure it out what and why. Thanks you in advance for the help.

Answer 1

If you're not sure about what you're doing, try to keep your code as simple as possible.

Playing with the indexWhere , firstWhere ... methods can be tricky if you don't know what you're doing, even more with the null-safety.

If you wanna update a single item in your list, you could consider using a simple for loop like this :

void updatePrice(ItemData price) {
  //Making a shallow copy of the original list
  var datasUpdate = _items?.toList();
  
  //Since the datasUpdate is a local var
  //we can null-check it to avoid using "!" everywhere
  if (datasUpdate != null) {
    for (int i = 0; i < datasUpdate.length; i++) {
      if (datasUpdate[i].id == price.id) {
        datasUpdate[i] = price;
        break;
      }
    }
    
    //Finally we update your initial List.
    //No need to use a shallow copy here
    _items = datasUpdate;
    notifyListeners();
  }
}

A fully working example is available here on this dartpad