我的目标只是显示来自我的 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;
}
);
}
这工作正常,我已经控制台记录了所有正确的值。
让我感到困惑的部分是我想要显示它的时候。这是我的 react 组件:
// @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“后端”之间的一些奇怪的服务器/客户端关系有关。我不确定如何在这两个组件之间创建一个简单的接口(interface)以使它们工作。
最佳答案
正如我在评论中提到的,您的代码是异步的,您的 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);
}
);
}
关于node.js - 如何使用 Electron 和 React 显示从文件中读取的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56381118/