Flutter页面返回后数据重复加载问题求助

问题根源 #

1. Flutter端重复数据原因：你把list声明为全局变量，每次返回页面时，initState会重新请求数据，并用addAll()把新数据追加到已有列表里，导致旧数据+新数据重复显示。
2. PHP端的小问题：关闭数据库连接时用了错误的变量名$mysqli_connect，和前面的连接变量$connect不一致，会引发未定义变量警告。

修复方案 #

Flutter代码修复

把全局list移到State类内部作为局部状态变量，确保每次页面初始化都会创建空列表；同时规范方法命名：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyAds extends StatefulWidget {
  const MyAds({Key? key}) : super(key: key);

  @override
  State<MyAds> createState() => _MyAdsState();
}

int select_item = 0;

class _MyAdsState extends State<MyAds> {
  // 将list改为局部状态变量，每次页面创建时初始化空列表
  List list = [];

  Future<void> fetchMyAds() async {
    final response =
        await http.get(Uri.parse('https://***.***.***.**/getData.php'));

    if (response.statusCode == 200) {
      var red = jsonDecode(response.body);

      setState(() {
        list.clear(); // 可选：防止异步重复请求时叠加数据
        list.addAll(red);
      });
    } else {
      throw Exception('Failed to load Ads');
    }
  }

  @override
  void initState() {
    super.initState();
    getData();
  }

  void getData() async {
    await fetchMyAds();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            margin: const EdgeInsets.only(left: 70, right: 60, top: 50),
            height: 54.0,
            width: 224.0,
            child: Container(
                decoration: BoxDecoration(
                    border:
                        Border.all(color: const Color(0xffF4AC47), width: 5),
                    color: const Color(0xff42A9D2),
                    borderRadius: const BorderRadius.only(
                        bottomLeft: Radius.circular(40),
                        bottomRight: Radius.circular(40))),
                child: const Center(
                  child: Text(
                    "MyAds",
                    style: TextStyle(
                        fontSize: 25,
                        color: Color(0xff072A52),
                        fontFamily: 'Cairo'),
                    textAlign: TextAlign.center,
                  ),
                )),
          ),
          const SizedBox(
            height: 35,
          ),
          Expanded(
            child: ListView.builder(
              itemCount: list.length,
              itemBuilder: ((cts, i) {
                return Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 10),
                      height: 180.0,
                      child: Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: const Color(0xff42A9D2), width: 5),
                            borderRadius: BorderRadius.circular(8)),
                        child: Row(
                          children: [
                            const Expanded(
                              flex: 3,
                              child: Image(
                                image: AssetImage("assets/book.jpg"),
                              ),
                            ),
                            Expanded(
                              flex: 6,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    "${list[i]["book_name"]}",
                                    style: TextStyle(
                                        fontSize: 20, color: Colors.black87),
                                  ),
                                  const SizedBox(height: 12),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Text("${list[i]["collage"]}"),
                                      const Icon(Icons.perm_identity_rounded)
                                    ],
                                  ),
                                  const SizedBox(height: 12),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Text("${list[i]["loc"]}"),
                                      const Icon(Icons.store)
                                    ],
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    const SizedBox(height: 16),
                  ],
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}

PHP代码修复

修正连接变量名，初始化$data数组避免空数据报错：

<?php
include("config.php");

$data = []; // 初始化数组，防止无数据时返回null
$sql = "SELECT book_name,loc,com,spe,collage FROM ads";
$res = $connect->query($sql);

while($row = $res->fetch_assoc()) {
    $data[]=$row;
}

echo json_encode($data);

$connect->close(); // 修正变量名，与前面的连接变量一致
?>

额外优化建议 #

• 可以在fetchMyAds方法里添加加载状态，避免页面空白时用户困惑。
• 全局变量select_item如果只在当前页面使用，建议移到State内部，避免全局污染。

内容的提问来源于stack exchange，提问作者ayed