Как отобразить данные, прочитанные из файла, используя Electron и React?

Question

Моя цель - просто отобразить данные (используя React) из файла, хранящегося локально с моим приложением Electron.Я уже на полпути в самом деле, читая и обрабатывая данные, я просто не могу понять , как их отобразить .

Вот что я имею для чтения моего файла:

export function read() {
  let values = [];

  fs.readFile(
    path.resolve(__dirname, './files/test.txt'),
    'utf-8',
    (err, data) => {
      if (err) throw err;
      values = data.toString().split('\n');

      const listItems = values.map(val => <p>{val}</p>);
      return listItems;
    }
  );
}

Это работает правильно, и я консоль записал все правильные значения.

Меня смущает то, когда я хочу отобразить это.Вот мой компонент реакции:

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

type Props = {};

export default class ReadFile extends Component<Props> {
  props: Props;

  render() {
    const result = read();

    return (
      <div className={styles.container} data-tid="container">
        <p>Read from File</p>
        {result}
      </div>
    );
  }
}

Я ожидал, что это вызовет функцию read, сохранит ее в result, а затем напечатает результаты с помощью {result}.Вместо этого он ничего не отображает.Это также не дает ошибок.

У меня такое ощущение, что это связано с нечетными отношениями сервер / клиент между клиентским интерфейсом реагирования и "backend" узла node.js, читающим файл.Я не уверен, как создать простой интерфейс между этими двумя компонентами, чтобы заставить их работать.

Answer 1

Как уже упоминалось в моем комментарии, ваш код асинхронный, а ваш метод read () ничего не возвращает.У вас должно быть что-то похожее на это:

export default class ReadFile extends Component<Props> {
  props: Props;
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    read((result) => {
      this.setState({
        result,
      });
    });
  }

  render() {
    return (
      <div className={styles.container} data-tid="container">
        <p>Read from File</p>
        {this.state.result}
      </div>
    );
  }
}

И для чтения () это:

export function read(callback) {
  let values = [];

  fs.readFile(
    path.resolve(__dirname, './files/test.txt'),
    'utf-8',
    (err, data) => {
      if (err) throw err;
      values = data.toString().split('\n');

      const listItems = values.map(val => <p>{val}</p>);
      return callback(listItems);
    }
  );
}