Flutter中setState函数不生效求助：删除API数据后列表未刷新

我在用API开发功能，通过DELETE方法删除带唯一ID的列表项。删除接口能正常执行，但每次必须手动刷新页面才能看到删除后的结果。我尝试在按钮的点击事件里嵌套setState()并调用deleteData方法，但这个操作没生效，也没有任何报错信息。

当前代码情况 #

删除方法代码 #

Future<void> deleteData(todo) async {
  var urlToUpdate = Uri.parse('https://todoapp-api.apps.k8s.gu.se/todos/${todo.id}?key=${testKey}');

  try {
    await http.delete(urlToUpdate, headers: {"Content-Type": "application/json"}, body: jsonEncode({
      "id": todo.id,
      "title": todo.title,
      "done": todo.done
    }));
  } catch (err) {
    print(err);
  }
}

setState相关代码 #

child: IconButton(
  onPressed: () {
    setState(() {
      var deleteTodo = TodoItem(id: id, title: '', done: false);
      deleteData(deleteTodo);
    });
  },
)

Todo列表获取与渲染相关代码 #

• 列表定义：

List TodoItemsList = [];

• 获取数据方法：

Future fetchPosts() async {
  try {
    await getKey();
    final response = await HTTP.get(Uri.parse('${url}${todos}${testKey}'));
    final jsonData = jsonDecode(response.body);

    setState(() {
      TodoItemsList = jsonData;
    });

    print(jsonData);
  } catch (err) {
    print('Error');
  }
}

• 列表渲染Widget：

Widget getBody() {
  return ListView.builder(
    itemCount: TodoItemsList.length,
    itemBuilder: (context, index) {
      return getCard(TodoItemsList[index]);
    });
}

问题原因与解决办法 #

核心问题 #

当前代码只执行了API删除请求，但没有更新本地的TodoItemsList，也没在请求完成后触发UI刷新。另外，你在setState里创建的空TodoItem对象逻辑错误，不是当前要删除的目标项。

修正步骤 #

1. 修改deleteData方法，请求成功后更新本地列表
   在API请求成功后，从本地列表移除对应ID的项，再调用setState刷新UI：

   Future<void> deleteData(todo) async {
     var urlToUpdate = Uri.parse('https://todoapp-api.apps.k8s.gu.se/todos/${todo.id}?key=${testKey}');
   
     try {
       final response = await http.delete(
         urlToUpdate,
         headers: {"Content-Type": "application/json"},
         body: jsonEncode({
           "id": todo.id,
           "title": todo.title,
           "done": todo.done
         })
       );
       // 确认请求成功后再更新本地列表
       if (response.statusCode == 200 || response.statusCode == 204) {
         setState(() {
           TodoItemsList.removeWhere((item) => item['id'] == todo.id);
         });
       }
     } catch (err) {
       print(err);
     }
   }
   

2. 修正按钮点击事件的逻辑
   直接传入当前要删除的列表项给deleteData即可，无需在setState里创建新对象：

   child: IconButton(
     onPressed: () {
       // 传入当前列表项，根据你的getCard逻辑替换为正确的todo对象
       deleteData(TodoItemsList[index]);
     },
   )
   

补充说明 #

• 之前的setState无效是因为：你在setState里调用了异步的deleteData，setState会立即刷新UI，但此时API请求还未完成，本地列表没有变化，所以UI无更新。
• 判断响应状态码可以确保服务端确实删除成功后再更新本地数据，避免出现本地与服务端数据不一致的情况。

内容的提问来源于stack exchange，提问作者Ninna Svanström