如何在两个React组件间共享并更新对象数组

1. 创建收藏列表的Context与Provider #

新建一个FavoritesContext.js文件，统一管理收藏状态和操作方法：

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

const FavoritesContext = createContext();

export const FavoritesProvider = ({ children }) => {
  const [favourites, setFavourites] = useState([]);

  // 添加收藏：避免重复添加同一用户
  const addFavorite = (user) => {
    const isAlreadyAdded = favourites.some(item => item.id === user.id);
    if (!isAlreadyAdded) {
      setFavourites(prev => [...prev, user]);
    }
  };

  // 移除收藏
  const removeFavorite = (userId) => {
    setFavourites(prev => prev.filter(item => item.id !== userId));
  };

  return (
    <FavoritesContext.Provider value={{ favourites, addFavorite, removeFavorite }}>
      {children}
    </FavoritesContext.Provider>
  );
};

// 自定义Hook简化Context调用
export const useFavorites = () => {
  const context = useContext(FavoritesContext);
  if (!context) {
    throw new Error('useFavorites必须在FavoritesProvider内部使用');
  }
  return context;
};

2. 在根组件中包裹Provider #

找到你的根组件（比如App.js），将包含Dashboard和Favorites的路由部分用FavoritesProvider包裹，确保两个组件都能访问共享状态：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { FavoritesProvider } from './FavoritesContext';
import Dashboard from './components/Dashboard/Dashboard';
import Favorites from './components/Favorites/Favorites';

function App() {
  return (
    <Router>
      <FavoritesProvider>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/myList" element={<Favorites />} />
        </Routes>
      </FavoritesProvider>
    </Router>
  );
}

export default App;

3. 修改Dashboard组件，改用Context状态 #

删除原组件中的本地useState，通过useFavorites Hook获取共享的收藏数据和添加方法：

import { useNavigate } from 'react-router-dom';
import { useFavorites } from '../../FavoritesContext';
import useFetchUsers from '../hooks/useFetchUsers';

const Dashboard = () => {
  const navigate = useNavigate();
  const { favourites, addFavorite } = useFavorites();
  const { data: usersData } = useFetchUsers();

  return (
    <div>
      <button onClick={() => navigate("/myList")}>
        跳转到我的收藏
      </button>
      <h3>用户列表</h3>
      {usersData?.map((user) => (
        <div key={user.id}>
          <p>{user.id}</p>
          <p>{user.name}</p>
          <button onClick={() => addFavorite(user)}>添加收藏</button>
        </div>
      ))}
      <h3>当前收藏</h3>
      {favourites?.map((user) => (
        <div key={user.id}>
          <p>{user.id}</p>
          <p>{user.name}</p>
        </div>
      ))}
    </div>
  );
};

export default Dashboard;

4. 创建Favorites组件，展示收藏列表 #

新建Favorites.js组件，通过useFavorites获取收藏数据并渲染，同时支持移除收藏：

import { useFavorites } from '../../FavoritesContext';

const Favorites = () => {
  const { favourites, removeFavorite } = useFavorites();

  return (
    <div>
      <h2>我的收藏列表</h2>
      {favourites.length === 0 ? (
        <p>还没有收藏任何用户</p>
      ) : (
        favourites.map(user => (
          <div key={user.id}>
            <p>{user.id} - {user.name}</p>
            <button onClick={() => removeFavorite(user.id)}>移除收藏</button>
          </div>
        ))
      )}
    </div>
  );
};

export default Favorites;

完成以上步骤后，Dashboard和Favorites组件就能共享收藏数据，添加/移除操作会同步更新两个组件的视图。

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