如何使用 Electron 和 React 显示从文件中读取的数据？

debugcn 发表于 Dev

ryan.kom

我的目标只是从我的 Electron 应用程序本地存储的文件中显示数据（使用 React）。我在实际阅读和处理数据方面已经进行了一半，我只是不知道如何显示它。

这是我读取文件的内容：

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}. 它所做的是什么都不显示。它也不会出错。

我有一种感觉，这与 react 前端和 node.js“后端”读取文件之间的一些奇怪的服务器/客户端关系有关。我不确定如何在这两个组件之间创建一个简单的接口来让它们工作。

振树

正如我在评论中提到的，您的代码是异步的，您的 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>
    );
  }
}

而对于 read() 这个：

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);
    }
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。