React+PouchDB：如何在map函数中跨双库取数构建表格

Hey there! Let's break down what's going wrong with your current code first, then walk through some better approaches to handle this two-database data fetching in React + PouchDB.

What's Wrong With Your Current Code #

Your current approach has two critical issues:

• asyncFetchfromdb2 is an asynchronous operation, but you immediately try to access this.props.mytools.db2.type right after dispatching it. At that point, the request hasn't finished, so you'll either get an old value or undefined.
• If multiple rows trigger this request, your Redux store's db2 data will be overwritten by the last request's result. This means all rows will end up showing the same type value, which isn't what you want.

Better Approach 1: Pre-Fetch & Merge Data (Recommended for Performance) #

The most efficient way is to fetch all required data upfront, merge it, then render the table with the combined dataset. This avoids repeated database calls and asynchronous rendering issues.

Here's how to implement it in a class component:

class ToolTable extends React.Component {
  state = {
    mergedToolData: [],
    isLoading: true,
    error: null
  };

  async componentDidMount() {
    try {
      // Step 1: Fetch all documents from db1
      const db1Response = await this.props.mytools.db1.allDocs({ include_docs: true });
      const db1Tools = db1Response.rows.map(row => row.doc);

      // Step 2: Bulk-fetch corresponding documents from db2 (way more efficient than single gets)
      const db2Ids = db1Tools.map(tool => tool.id);
      const db2Response = await this.props.mytools.db2.bulkGet({
        docs: db2Ids.map(id => ({ id }))
      });

      // Step 3: Create a map of db2 docs for quick lookup
      const db2ToolMap = {};
      db2Response.results.forEach(result => {
        if (result.doc) {
          db2ToolMap[result.doc.id] = result.doc;
        }
      });

      // Step 4: Merge db1 and db2 data
      const mergedToolData = db1Tools.map(tool => ({
        ...tool,
        type: db2ToolMap[tool.id]?.type || "Unknown" // Handle cases where db2 has no matching doc
      }));

      this.setState({ mergedToolData, isLoading: false });
    } catch (err) {
      this.setState({ error: err.message, isLoading: false });
      console.error("Failed to load tool data:", err);
    }
  }

  render() {
    const { mergedToolData, isLoading, error } = this.state;

    if (isLoading) return <div>Loading tools...</div>;
    if (error) return <div>Error loading tools: {error}</div>;

    return (
      <table>
        <tbody>
          {mergedToolData.map(tool => (
            <tr key={tool.id}>
              <td>{tool.information}</td>
              <td>{tool.type}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

Better Approach 2: Per-Row Asynchronous Fetching (For Small Datasets) #

If you prefer to fetch data lazily per row (e.g., for very large datasets), extract the table row into its own component that handles its own data fetching:

// Reusable table row component
class ToolTableRow extends React.Component {
  state = {
    toolType: "Loading...",
    error: null
  };

  async componentDidMount() {
    const { toolId, db2 } = this.props;
    try {
      const db2Doc = await db2.get(toolId);
      this.setState({ toolType: db2Doc.type });
    } catch (err) {
      this.setState({ toolType: "Unknown", error: err });
      console.error(`Failed to load type for tool ${toolId}:`, err);
    }
  }

  render() {
    const { tool } = this.props;
    const { toolType } = this.state;
    return (
      <tr>
        <td>{tool.information}</td>
        <td>{toolType}</td>
      </tr>
    );
  }
}

// Parent table component
class ToolTable extends React.Component {
  render() {
    const db1Tools = this.props.mytools.db1.rows.map(row => row.doc);
    return (
      <table>
        <tbody>
          {db1Tools.map(tool => (
            <ToolTableRow
              key={tool.id}
              tool={tool}
              toolId={tool.id}
              db2={this.props.mytools.db2}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

Quick Best Practices #

• Use bulkGet instead of repeated get calls: PouchDB's bulkGet reduces the number of database interactions, which is much faster for multiple documents.
• Handle loading/error states: Always give users feedback while data loads, and gracefully handle cases where a document doesn't exist in db2.
• Real-time updates (optional): If your data changes frequently, use PouchDB's changes listener to automatically update your component state when databases are modified.

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