React页面切换后如何清除搜索结果并恢复全量数据？

问题根源 #

你的Search页面切换后保留了之前的搜索状态（比如输入框值、过滤后的数据），导致返回时未自动恢复全量数据。核心解决思路：在Search页面被激活/进入时，重置搜索状态并重新加载全量数据。

分场景实现方案 #

React 项目（基于react-router） #

通过监听路由变化，在进入Search页面时重置状态：

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

function SearchPage() {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [tableData, setTableData] = useState([]);
  const location = useLocation();

  // 模拟获取全量数据
  const fetchFullData = async () => {
    const res = await fetch('/api/full-data');
    const data = await res.json();
    setTableData(data);
  };

  // 路由切换到当前页面时，重置搜索状态并加载全量数据
  useEffect(() => {
    setSearchKeyword('');
    fetchFullData();
  }, [location.pathname]);

  // 搜索过滤逻辑
  const handleSearch = (e) => {
    const keyword = e.target.value;
    setSearchKeyword(keyword);
    fetch('/api/full-data').then(res => res.json()).then(data => {
      const filtered = data.filter(item => item.name.includes(keyword));
      setTableData(filtered);
    });
  };

  return (
    <div>
      <input type="text" value={searchKeyword} onChange={handleSearch} placeholder="搜索..." />
      <table>
        {/* 表格渲染逻辑 */}
      </table>
    </div>
  );
}

Vue 项目 #

未使用keep-alive缓存

直接在页面挂载时重置状态：

<template>
  <div>
    <input v-model="searchKeyword" @input="handleSearch" placeholder="搜索..." />
    <table>
      <!-- 表格渲染逻辑 -->
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const searchKeyword = ref('');
const tableData = ref([]);

// 获取全量数据
const fetchFullData = async () => {
  const res = await axios.get('/api/full-data');
  tableData.value = res.data;
};

// 页面挂载时重置搜索状态
onMounted(() => {
  searchKeyword.value = '';
  fetchFullData();
});

// 搜索过滤逻辑
const handleSearch = () => {
  axios.get('/api/full-data').then(res => {
    tableData.value = res.data.filter(item => item.name.includes(searchKeyword.value));
  });
};
</script>

使用keep-alive缓存

利用activated钩子在组件激活时重置状态：

<script setup>
import { ref, onActivated } from 'vue';
import axios from 'axios';

const searchKeyword = ref('');
const tableData = ref([]);

const fetchFullData = async () => {
  const res = await axios.get('/api/full-data');
  tableData.value = res.data;
};

// 组件被激活（从缓存中恢复）时重置状态
onActivated(() => {
  searchKeyword.value = '';
  fetchFullData();
});

// 搜索过滤逻辑
const handleSearch = () => {
  axios.get('/api/full-data').then(res => {
    tableData.value = res.data.filter(item => item.name.includes(searchKeyword.value));
  });
};
</script>

原生JS/无框架项目 #

监听页面显示或路由切换事件：

const searchInput = document.getElementById('search-input');
let tableData = [];

// 获取全量数据并渲染表格
function fetchFullData() {
  fetch('/api/full-data')
    .then(res => res.json())
    .then(data => {
      tableData = data;
      renderTable(data); // 自定义表格渲染函数
    });
}

// 监听页面重新显示
document.addEventListener('visibilitychange', () => {
  if (!document.hidden && window.location.pathname === '/search') {
    searchInput.value = '';
    fetchFullData();
  }
});

// 监听hash路由变化（如果使用hash模式）
window.addEventListener('hashchange', () => {
  if (window.location.hash === '#/search') {
    searchInput.value = '';
    fetchFullData();
  }
});

// 搜索过滤逻辑
searchInput.addEventListener('input', (e) => {
  const keyword = e.target.value;
  const filtered = tableData.filter(item => item.name.includes(keyword));
  renderTable(filtered);
});

通用核心要点 #

• 清空搜索输入框的内容
• 重新加载全量原始数据
• 确保操作触发时机为页面被进入/激活时，而非仅首次挂载

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