如何使用Electron和React展示从本地文件读取的数据？

Hey there, let's break down why your component isn't showing the file content and fix it step by step! The core issue here is how you're handling asynchronous operations in React, plus a small misunderstanding about how async callbacks return values.

What's Going Wrong? #

Your read() function uses fs.readFile, which is asynchronous—when you call read() directly in your component's render() method, the function immediately returns undefined before the file finishes loading. The return listItems inside the callback doesn't get passed back as the result of read() because the callback runs later, after the file read completes.

Also, mixing data processing with React element creation inside the async callback isn't aligned with React's design—we need to let React handle rendering based on component state.

Step 1: Rewrite the read() Function to Return a Promise #

First, let's convert the callback-based file read into a Promise so we can handle it cleanly with async/await:

// fileread.js
import fs from 'fs';
import path from 'path';

export async function read() {
  try {
    // Use fs.promises for cleaner async/await syntax
    const data = await fs.promises.readFile(
      path.resolve(__dirname, './files/test.txt'),
      'utf-8'
    );
    // Return raw processed data, not React elements
    return data.toString().split('\n');
  } catch (err) {
    console.error('Failed to read file:', err);
    throw err;
  }
}

Step 2: Update Your React Component to Handle Async Data #

In React class components, we use lifecycle methods (like componentDidMount) to run async operations, then store the result in state. When state updates, React automatically re-renders the component with the new data:

// ReadFile.js
// @flow
import React, { Component } from 'react';
import styles from './ReadFile.css';
import { read } from '../actions/fileread';

type Props = {};
type State = {
  fileLines: string[],
  isLoading: boolean,
  error?: Error
};

export default class ReadFile extends Component<Props, State> {
  // Initialize state with loading status
  state = {
    fileLines: [],
    isLoading: true
  };

  // Run async file read once the component mounts
  componentDidMount() {
    this.loadFileContent();
  }

  async loadFileContent() {
    try {
      const lines = await read();
      this.setState({
        fileLines: lines,
        isLoading: false
      });
    } catch (err) {
      this.setState({
        error: err,
        isLoading: false
      });
    }
  }

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

    // Show loading state while fetching
    if (isLoading) {
      return <div className={styles.container}>Loading file content...</div>;
    }

    // Show error if something went wrong
    if (error) {
      return <div className={styles.container}>Error reading file: {error.message}</div>;
    }

    // Render the file content once loaded
    return (
      <div className={styles.container} data-tid="container">
        <p>Read from File</p>
        {fileLines.map((line, index) => (
          <p key={index}>{line}</p>
        ))}
      </div>
    );
  }
}

Key Takeaways #

1. Don't run async operations directly in render(): render() is a pure function that should only return UI based on state/props. Async work belongs in lifecycle methods (or useEffect for functional components).
2. State drives UI: Always store async data in component state—React will re-render the component when state updates, showing your new data automatically.
3. Separate data logic from UI: Let your read() function handle just fetching/processing data, and leave rendering to the React component.

Bonus: Electron Security Note #

If you're using a newer Electron version (12+), it's safer to use a preload script with contextBridge to expose Node.js APIs to your React app, instead of enabling nodeIntegration directly. Here's a quick example:

Preload Script (preload.js)

const { contextBridge } = require('electron');
const fs = require('fs').promises;
const path = require('path');

contextBridge.exposeInMainWorld('electronAPI', {
  readLocalFile: async () => {
    const data = await fs.readFile(
      path.resolve(__dirname, './files/test.txt'),
      'utf-8'
    );
    return data.split('\n');
  }
});

Update Main Process BrowserWindow Config

const mainWindow = new BrowserWindow({
  // ... other config
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false
  }
});

Then in your component, replace the read() import with window.electronAPI.readLocalFile()—this keeps your app secure while still accessing Node.js features.

内容的提问来源于stack exchange，提问作者ryan.kom