Angular 10中修改记录后如何自动刷新搜索结果？

下面分Vue和React两种主流框架给出具体实现方案：

Vue 实现方案 #

方法1：子组件触发父组件事件（最常用） #

父组件（搜索组件）维护搜索结果状态，子组件（编辑模态框）完成编辑并保存成功后，向父组件发送事件，父组件收到事件后重新执行搜索逻辑或更新本地数据。

父组件代码示例：

<template>
  <div class="search-component">
    <!-- 搜索筛选区域 -->
    <input v-model="searchKeyword" placeholder="输入关键词搜索" />
    <button @click="handleSearch">搜索</button>

    <!-- 搜索结果网格 -->
    <div class="result-grid">
      <div v-for="item in searchResults" :key="item.id" class="result-item">
        <span>{{ item.name }}</span>
        <button @click="openEditModal(item)">编辑</button>
      </div>
    </div>

    <!-- 编辑模态框子组件 -->
    <EditModal 
      :visible="modalVisible" 
      :editItem="currentEditItem"
      @close="modalVisible = false"
      @update-success="handleRefreshResults"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import EditModal from './EditModal.vue';

const searchKeyword = ref('');
const searchResults = ref([]);
const modalVisible = ref(false);
const currentEditItem = ref(null);

// 搜索逻辑
const handleSearch = async () => {
  // 模拟接口请求
  const res = await fetch(`/api/search?keyword=${searchKeyword.value}`);
  searchResults.value = await res.json();
};

// 打开编辑模态框
const openEditModal = (item) => {
  currentEditItem.value = { ...item };
  modalVisible.value = true;
};

// 刷新搜索结果
const handleRefreshResults = async () => {
  // 直接复用搜索逻辑，无需用户再次点击搜索按钮
  await handleSearch();
};
</script>

子组件（EditModal）代码示例：

<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <input v-model="formData.name" placeholder="修改名称" />
      <button @click="handleSave">保存</button>
      <button @click="$emit('close')">取消</button>
    </div>
  </div>
</template>

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

const props = defineProps({
  visible: Boolean,
  editItem: Object
});

const emit = defineEmits(['close', 'update-success']);

const formData = ref({});

// 初始化表单数据
watch(() => props.editItem, (newItem) => {
  if (newItem) {
    formData.value = { ...newItem };
  }
}, { immediate: true });

// 保存编辑内容
const handleSave = async () => {
  // 模拟提交修改接口
  await fetch(`/api/edit/${formData.value.id}`, {
    method: 'PUT',
    body: JSON.stringify(formData.value),
    headers: { 'Content-Type': 'application/json' }
  });
  
  // 保存成功后触发父组件刷新事件
  emit('update-success');
  // 关闭模态框
  emit('close');
};
</script>

方法2：使用状态管理（Pinia/Vuex） #

如果项目用了Pinia或Vuex，可将搜索结果存在全局状态中，子组件修改数据后直接更新全局状态，父组件会自动响应状态变化刷新视图。

Pinia Store示例：

import { defineStore } from 'pinia';

export const useSearchStore = defineStore('search', {
  state: () => ({
    results: []
  }),
  actions: {
    async fetchResults(keyword) {
      const res = await fetch(`/api/search?keyword=${keyword}`);
      this.results = await res.json();
    },
    async updateItem(updatedItem) {
      // 提交修改
      await fetch(`/api/edit/${updatedItem.id}`, {
        method: 'PUT',
        body: JSON.stringify(updatedItem),
        headers: { 'Content-Type': 'application/json' }
      });
      // 更新全局状态中的对应项
      const index = this.results.findIndex(item => item.id === updatedItem.id);
      if (index !== -1) {
        this.results[index] = updatedItem;
      }
    }
  }
});

父组件和子组件直接调用store的方法即可，无需手动触发事件。

React 实现方案 #

方法1：通过props传递回调函数 #

父组件将刷新搜索结果的回调函数传给子组件，子组件保存成功后调用该回调，父组件重新获取数据或更新state。

父组件代码示例：

import { useState } from 'react';
import EditModal from './EditModal';

function SearchComponent() {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [currentEditItem, setCurrentEditItem] = useState(null);

  // 搜索逻辑
  const handleSearch = async () => {
    const res = await fetch(`/api/search?keyword=${searchKeyword}`);
    const data = await res.json();
    setSearchResults(data);
  };

  // 打开编辑模态框
  const openEditModal = (item) => {
    setCurrentEditItem({ ...item });
    setModalVisible(true);
  };

  // 刷新搜索结果
  const handleRefreshResults = async () => {
    await handleSearch();
    setModalVisible(false);
  };

  return (
    <div className="search-component">
      <input 
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
        placeholder="输入关键词搜索"
      />
      <button onClick={handleSearch}>搜索</button>

      <div className="result-grid">
        {searchResults.map(item => (
          <div key={item.id} className="result-item">
            <span>{item.name}</span>
            <button onClick={() => openEditModal(item)}>编辑</button>
          </div>
        ))}
      </div>

      {modalVisible && (
        <EditModal 
          editItem={currentEditItem}
          onSave={handleRefreshResults}
          onCancel={() => setModalVisible(false)}
        />
      )}
    </div>
  );
}

export default SearchComponent;

子组件（EditModal）代码示例：

import { useState, useEffect } from 'react';

function EditModal({ editItem, onSave, onCancel }) {
  const [formData, setFormData] = useState({});

  useEffect(() => {
    if (editItem) {
      setFormData({ ...editItem });
    }
  }, [editItem]);

  const handleSave = async () => {
    // 提交修改
    await fetch(`/api/edit/${formData.id}`, {
      method: 'PUT',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' }
    });
    // 调用父组件的刷新回调
    onSave();
  };

  return (
    <div className="modal">
      <div className="modal-content">
        <input 
          value={formData.name}
          onChange={(e) => setFormData({...formData, name: e.target.value})}
          placeholder="修改名称"
        />
        <button onClick={handleSave}>保存</button>
        <button onClick={onCancel}>取消</button>
      </div>
    </div>
  );
}

export default EditModal;

方法2：使用Context API #

如果组件层级较深，可用Context把搜索结果和更新方法共享出去，子组件直接调用更新方法修改数据，父组件自动刷新。

SearchContext示例：

import { createContext, useContext, useState } from 'react';

const SearchContext = createContext();

export function SearchProvider({ children }) {
  const [searchResults, setSearchResults] = useState([]);

  const fetchResults = async (keyword) => {
    const res = await fetch(`/api/search?keyword=${keyword}`);
    const data = await res.json();
    setSearchResults(data);
  };

  const updateItem = async (updatedItem) => {
    await fetch(`/api/edit/${updatedItem.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedItem),
      headers: { 'Content-Type': 'application/json' }
    });
    // 更新本地结果
    setSearchResults(prev => prev.map(item => 
      item.id === updatedItem.id ? updatedItem : item
    ));
  };

  return (
    <SearchContext.Provider value={{ searchResults, fetchResults, updateItem }}>
      {children}
    </SearchContext.Provider>
  );
}

export function useSearch() {
  return useContext(SearchContext);
}

父组件和子组件通过useSearch钩子获取方法，无需手动传递props。

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