如何在React中实现localforage数据更新后重新渲染组件B

Great question! The core issue here is that localforage doesn't come with built-in reactivity out of the box. When Component A updates the stored data, Component B has no way of detecting that change automatically since it only fetches the data once in componentDidMount. Let's walk through a couple of solid solutions to fix this:

1. Use React Context API (Recommended for Shared State) #

This approach centralizes your tracked movies state, so any updates to it automatically propagate to components that depend on it—while still syncing with localforage for persistence.

Step 1: Create a Context and Provider #

First, set up a context to hold and manage your tracked movies state:

// TrackedMoviesContext.js
import React, { createContext, useState, useEffect } from 'react';
import localforage from 'localforage';

export const TrackedMoviesContext = createContext();

export const TrackedMoviesProvider = ({ children }) => {
  const [trackedMovies, setTrackedMovies] = useState([]);

  // Load initial data from localforage on mount
  useEffect(() => {
    const loadSavedMovies = async () => {
      const saved = await localforage.getItem('trackedMovies') || [];
      setTrackedMovies(saved);
    };
    loadSavedMovies();
  }, []);

  // Wrapper function to update state AND sync with localforage
  const updateTrackedMovies = async (newMovies) => {
    setTrackedMovies(newMovies);
    await localforage.setItem('trackedMovies', newMovies);
  };

  return (
    <TrackedMoviesContext.Provider value={{ trackedMovies, updateTrackedMovies }}>
      {children}
    </TrackedMoviesContext.Provider>
  );
};

Step 2: Wrap Your App with the Provider #

In your root component (like App.js), wrap everything with the provider to make the context available:

// App.js
import { TrackedMoviesProvider } from './TrackedMoviesContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  return (
    <TrackedMoviesProvider>
      <ComponentA />
      <ComponentB />
    </TrackedMoviesProvider>
  );
}

Step 3: Update Component A to Use the Context #

Replace direct localforage calls with the context's update method:

// ComponentA.js
import { useContext } from 'react';
import { TrackedMoviesContext } from './TrackedMoviesContext';

const ComponentA = () => {
  const { trackedMovies, updateTrackedMovies } = useContext(TrackedMoviesContext);

  const addNewMovie = async (newMovie) => {
    const updatedList = [...trackedMovies, newMovie];
    await updateTrackedMovies(updatedList);
  };

  // Example button to add a movie
  return (
    <button onClick={() => addNewMovie({ id: Date.now(), original_title: "New Awesome Movie" })}>
      Add Movie
    </button>
  );
};

Step 4: Refactor Component B to Consume the Context #

Now Component B will automatically re-render whenever the tracked movies state changes:

// ComponentB.js
import { Component } from 'react';
import { TrackedMoviesContext } from './TrackedMoviesContext';

class ComponentB extends Component {
  static contextType = TrackedMoviesContext;

  render() {
    const { trackedMovies } = this.context;
    return (
      <React.Fragment>
        <h1>Dashboard</h1>
        {trackedMovies.map(movie => (
          <span key={movie.id}>{movie.original_title}</span>
        ))}
      </React.Fragment>
    );
  }
}

// If you prefer function components, this is even simpler:
// const ComponentB = () => {
//   const { trackedMovies } = useContext(TrackedMoviesContext);
//   return (
//     <React.Fragment>
//       <h1>Dashboard</h1>
//       {trackedMovies.map(movie => (
//         <span key={movie.id}>{movie.original_title}</span>
//       ))}
//     </React.Fragment>
//   );
// };

export default ComponentB;

2. Custom DOM Events (Lightweight for Small Projects) #

If you don't want to set up full state management, you can use custom DOM events to notify Component B when the data changes.

Update Component A to Trigger an Event #

After updating localforage, dispatch a custom event:

// ComponentA.js
const addNewMovie = async (newMovie) => {
  const currentMovies = await localforage.getItem('trackedMovies') || [];
  const updatedMovies = [...currentMovies, newMovie];
  await localforage.setItem('trackedMovies', updatedMovies);

  // Dispatch custom event to notify listeners
  window.dispatchEvent(new CustomEvent('trackedMoviesUpdated'));
};

Modify Component B to Listen for the Event #

Add an event listener in componentDidMount and clean it up in componentWillUnmount:

// ComponentB.js
class ComponentB extends Component {
  state = {
    data: []
  };

  getData = async () => {
    const trackedMovies = await localforage.getItem('trackedMovies') || [];
    this.setState({ data: trackedMovies });
  };

  componentDidMount() {
    this.getData();
    // Listen for the custom event
    window.addEventListener('trackedMoviesUpdated', this.getData);
  }

  componentWillUnmount() {
    // Clean up the listener to prevent memory leaks
    window.removeEventListener('trackedMoviesUpdated', this.getData);
  }

  render() {
    return (
      <React.Fragment>
        <h1>Dashboard</h1>
        {this.state.data.map(movie => (
          <span key={movie.id}>{movie.original_title}</span>
        ))}
      </React.Fragment>
    );
  }
}

Which Should You Choose? #

• Context API: Best practice for medium to large apps—it keeps your state organized and avoids tight coupling between components.
• Custom Events: Quick fix for small apps or isolated components where full state management feels overkill.

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