Taro页面跳转后数据未更新，如何强制重新获取数据？

慕容家淼提问于 2026-02-02 19:29:23 阅读 55

移动

我在用Taro做电商列表页时遇到个问题，从商品列表跳转到详情页再返回后，列表数据没更新。之前用setData和useState都试过，但页面数据还是显示旧的缓存内容。

代码是这样写的：


const [goodsList, setGoodsList] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const res = await api.getGoodsList();
    setGoodsList(res.data);
  };
  fetchData();
}, []);

const gotoDetail = (id) => {
  Taro.navigateTo({ url: <code>/pages/detail/index?id=${id}</code> });
};

但返回列表页时数据没变，必须手动刷新才更新，求大神指点怎么让页面重新请求数据？

Taro 跨端开发

我来解答赞 7 收藏

反馈

2 条解答

Prog.英歌 Lv1

这问题我之前也踩过，Taro默认会对页面做缓存，返回时不会重新触发useEffect，所以数据不会更新。

你得在页面里监听show事件，手动触发数据更新。修改你的代码如下：

useEffect(() => {

  const fetchData = async () => {

    const res = await api.getGoodsList();

    setGoodsList(res.data);

  };



  // 首次加载

  fetchData();



  // 监听页面显示事件，用于返回时刷新

  const page = getCurrentPages().pop();

  if (page) {

    page.onShow = () => {

      fetchData();

    };

  }



  // 清理事件避免内存泄漏

  return () => {

    if (page && page.onShow) {

      page.onShow = null;

    }

  };

}, []);

这样用户从详情页返回时，就会重新拉数据了。如果你的列表页有传参（比如分类、排序条件），建议把这些参数放进useEffect的依赖数组，或者用useCallback优化一下fetchData。

2026-02-03 17:11

Mr-俊瑶 Lv1

问题在于你的 useEffect 没有正确处理依赖或者生命周期问题，导致返回时不会重新触发数据请求。复制这个：

import Taro, { useEffect, useState } from '@tarojs/react';



const [goodsList, setGoodsList] = useState([]);

const [key, setKey] = useState(0); // 添加一个强制更新的 key



useEffect(() => {

  const fetchData = async () => {

    const res = await api.getGoodsList();

    setGoodsList(res.data);

  };

  fetchData();

}, [key]); // 将 key 加入依赖数组



const gotoDetail = (id) => {

  Taro.navigateTo({ url: /pages/detail/index?id=${id} });

};



// 在页面显示时强制更新

useEffect(() => {

  const handlePullDownRefresh = () => {

    setKey(key + 1); // 修改 key 触发重新加载

  };



  Taro onPageShow(handlePullDownRefresh);



  return () => {

    Taro.offPageShow(handlePullDownRefresh);

  };

}, [key]);

这样每次返回页面时都会触发 useEffect 重新加载数据。如果你用的是 Taro 的 onShow 生命周期也可以替换掉第二个 useEffect。懒得改的话直接复制上面那段就行。

2026-02-02 20:03