读取文件组件（fs.readFile）答案

【问题标题】：Read file component (fs.readFile)读取文件组件（fs.readFile）
【发布时间】：2020-06-17 21:50:19
【问题描述】：

我收到一条错误消息，指出 fs.readFile 不是函数。 fs.readFile的使用我有什么不明白的地方？

https://www.geeksforgeeks.org/node-js-fs-readfile-method/

这里的目标是将我的文件的内容放入一个变量中并进一步解析该值。

import React from 'react';


const fs = require('fs')

const ToolTipTextMod = (props) => {
    let txt = null;
    fs.readFile('../../components/ToolTip/ToolTipText.txt',(err, data) => {console.log(data)})

    return(
        <p>{txt},{props.textId}</p>

    );
}

export default ToolTipTextMod;

【问题讨论】：

您不能混合使用来自node.js API 的函数，这些函数旨在从本地命令行运行，而客户端 Javascript 将在没有文件的浏览器窗口中运行。在浏览器中无法使用readFile。
不要在 React 中使用 fs：它是一个用于处理文件系统的 API，页面 JS 永远无法做到这一点。大概您正在将您的 React 代码与 webpack 捆绑在一起（就像其他人一样），在这种情况下，您使用 webpack 加载器加载数据，例如 raw-loader 用于将文件加载为字符串数据，而您的 JS 代码使用 import/@ 987654331@ 用于您需要的文件，方式与import/require JS 代码完全相同。然后，Webpack 将确保一切正常。
您可以使用fetch 来加载文本文件。参考这里stackoverflow.com/a/50570949/311255

标签： javascript reactjs

【解决方案1】：

fs 是一个 Nodejs 模块。所以我会推荐使用像 raw-loader 这样的包，但是你需要设置 webpack。

所以另一种方法是简单地使用 fetch/Axios。

例子：

 import React, {useState,useEffect} from "react";
 import txt from "./test.txt"; // Your file path 
 import Axios from "axios"; // Import Axios or use Fetch.


const ToolTipTextMod = (props) => {
const [text,setText] = useState("");

useEffect(()=>{
   Axios(txt).then(res => setText(res.data)); // This will have your text inside data attribute
},[])

return <p>/* code */</p>

}

【讨论】：

这无疑是朝着正确的方向发展。我能够记录预期的文本。但是我在解构 axios 调用时遇到了一些困难。如何将 res.data 值放入变量中？
@ChristianCuneo 只需创建一个状态并将其放入其中，我已经更新了答案:)