使用 setState 更新数据后不要重新加载页面

Question

我想在单击星形图标时删除记录，但是当我单击星形图标更改 setState 中的值时，数据不会立即更新，而是必须重定向到另一个页面。那么，如何在点击星形图标后立即更新列表呢？感谢任何帮助！

我的代码：

Future<List<Favorite>> fetchFavorite() async{
  var requestHeaders = <String, String>{
    "Content-type": "application/json",
    "Accept": "application/json",
    "Authorization": "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ2YW50aHUiLCJpYXQiOjE2MjAyMTA4NzcsImV4cCI6MTYyMjgwMjg3N30.9QrtUCQpy-Jd_4b7YwLY6GXlEab4M2_NDLRipNcFF_iEmIIzX1JKlotu7L_WJbXTJgtpFYY9kIW3GY6zhAx-JA"
  };
  final response = await http.get(Uri.parse(URL1), headers: requestHeaders);
  print(response);
  // print(response.body);
  var decoded = utf8.decode(response.bodyBytes);
  var responseJson = json.decode(decoded);
  var rs = (responseJson['data']['content'] as List)
      .map((p) => Favorite.fromJson(p))
      .toList();

  return rs;
}
Future<Favorite> setFavorite(nodeId) async{
  var requestHeaders = <String, String>{
    "Content-type": "application/json",
    "Accept": "application/json",
    "Authorization": "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ2YW50aHUiLCJpYXQiOjE2MjAyOTAxMDQsImV4cCI6MTYyMjg4MjEwNH0.G7vSN6jU9Y-87qEiU4UeyLZN6JkuRTFnmqkkYLWvIJZ8yCUXFSU8cAbIZ-RxD6-4Pab_9yqTC9Yo5fFpVcpcIQ"
  };
  final response = await http.post(
      Uri.parse(URL_SETFAVORITE+nodeId),
    headers: requestHeaders,
    body: jsonEncode(null)
  );
  print(URL_SETFAVORITE+nodeId);
  if (response.statusCode == 200) {
    return Favorite.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to update album.');
  }
}

还有：

class TableCategoryState extends State<TableCategory> {

  bool isButton = true;
  Future dataFuture;
  Future _futureFavorite;
  Widget star;
  SearchAppState searchAppState = SearchAppState();

  TableCategoryState();
  @override
  void initState(){
    super.initState();
    dataFuture = fetchFavorite();
  }

  @override
  Widget build(BuildContext context) {

    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: FittedBox(
        child: DataTable(
          dataRowHeight: 50,
          columnSpacing: 20,
          columns: <DataColumn>[
            DataColumn(
                label: Container(
                    child: Text('Danh mục')
                )
            ),
            DataColumn(
                label: Container(

                    child: Text('Loại')
                )
            ),
            DataColumn(
                label: Container(
                  child: Text('Ngày tạo')
                )
            ),
            DataColumn(label: Text('')),
          ],
          rows: widget.favorites?.map((Favorite e) {
            return DataRow(
                cells: <DataCell>[
                  DataCell(
                      Container(
                        width: 90,
                        child: Text(e.name, overflow: TextOverflow.ellipsis, maxLines: 2,),
                      ),
                  ),
                  DataCell(
                    Container(
                      width: 50,
                      child: e.type == 'folder' ? Text('Tài liệu') : Text('File')
                    ),
                  ),
                  DataCell(
                    Container(
                      width: 75,
                      child: Text(readTimestamp(e.timeCreate))
                    ),
                  ),
                  DataCell(
                    Container(
                      child: isButton
                          ? IconButton(
                          icon: Icon(
                            Icons.star, color: Colors.amber,
                          ),
                          onPressed: (){
                            setState(() {
                              setFavorite(e.nodeId);

                            });
                          })
                          : Container(child: Text('a'),),
                    ),
                ),
              ],
            );
          }).toList(),
        ),
      ),
    );
  }
}

Answer 1

如果您想通过执行dataFuture = fetchFavorite(); anf 来更新您的列表，然后使用更新后的dataFuture，那么您应该考虑使用FutureBuilder。然后您可以在执行过程中更新您的 dataFuture 实例，FutureBuilder 将适应您的更改

class TableCategoryState extends State<TableCategory> {

  Future dataFuture;

  TableCategoryState();
  @override
  void initState(){
    super.initState();
    dataFuture = fetchFavorite();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: dataFuture
      builder: (context, snapshot){
        return SingleChildScrollView(
          ...
          onPressed: (){
            setState(() 
               setFavorite(e.nodeId);
               dataFuture = fetchFavorite(); // Update your list again here
            });
          })
        );
      }
    );
  }
}