Flutter中_saveForm函数无法保存新产品的问题排查

问题现象 #

通过EditProductScreen添加新产品并点击保存后，产品无法显示在用户产品页面，无任何错误提示。

问题根源 #

_saveForm函数的判断逻辑存在错误：初始化的_editedProduct.id是空字符串''而非null，导致新增产品时错误执行updateProduct逻辑（而非addProduct）。由于updateProduct中找不到对应ID的产品，仅会打印...，不会触发添加操作，也不会更新UI。

修复方案 #

将_saveForm中的判断条件从_editedProduct.id != null改为_editedProduct.id.isNotEmpty：

修改前代码 #

if (_editedProduct.id != null) {
  Provider.of<ProductsProvider>(context, listen: false)
      .updateProduct(_editedProduct.id, _editedProduct);
} else {
  Provider.of<ProductsProvider>(context, listen: false).addProduct(
    Product(
      title: _editedProduct.title,
      description: _editedProduct.description,
      price: _editedProduct.price,
      imageUrl: _editedProduct.imageUrl,
      id: DateTime.now().toString(),
    ),
  );
}

修改后代码 #

if (_editedProduct.id.isNotEmpty) {
  Provider.of<ProductsProvider>(context, listen: false)
      .updateProduct(_editedProduct.id, _editedProduct);
} else {
  Provider.of<ProductsProvider>(context, listen: false).addProduct(
    Product(
      title: _editedProduct.title,
      description: _editedProduct.description,
      price: _editedProduct.price,
      imageUrl: _editedProduct.imageUrl,
      id: DateTime.now().toString(),
    ),
  );
}

补充说明 #

初始化_editedProduct时，id被设为空字符串：

var _editedProduct = Product(
  id: '',
  title: '',
  description: '',
  price: 0,
  imageUrl: '',
);

此时_editedProduct.id != null始终为true（空字符串不是null），导致新增流程永远走不到addProduct。改为判断id.isNotEmpty后，新增产品时id为空字符串，会正确执行添加逻辑，产品就能正常显示在列表中。

内容的提问来源于stack exchange，提问作者Abu Bakkar Siddik Rana