读取状态时的typeerror

Question

尝试使用zebra将状态设置为json，而json是通过在类构造函数中读取csv生成的。

import "./Maps.css";
import * as z from "zebras";
import df3 from "./df3.json"

class Maps extends Component {
  constructor() {
    super();
    const data = z.readCSV(df3);
    this.state = data
}

  render()
  {
    console.log(this.state)

    return (
      <div>
      </div>
    );
  }
}

export default Maps

在尝试控制台记录状态时，我得到了以下错误(我已将csv转换为json并将文件导入js)

TypeError: fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync is not a function
    at Module.<anonymous> (readCSV.js:18)
    at Module.f1 (_curry1.js:16)
    at new Maps (Maps.js:9)
    at constructClassInstance (react-dom.development.js:12905)
    at updateClassComponent (react-dom.development.js:17040)
    at beginWork (react-dom.development.js:18510)
    at beginWork$1 (react-dom.development.js:23028)
    at performUnitOfWork (react-dom.development.js:22019)
    at workLoopSync (react-dom.development.js:21992)
    at performSyncWorkOnRoot (react-dom.development.js:21610)
    at react-dom.development.js:11130
    at unstable_runWithPriority (scheduler.development.js:656)
    at runWithPriority$1 (react-dom.development.js:11076)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11125)
    at flushSyncCallbackQueue (react-dom.development.js:11113)
    at scheduleUpdateOnFiber (react-dom.development.js:21053)
    at updateContainer (react-dom.development.js:24191)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24590)
    at Object.render (react-dom.development.js:24656)
    at Module../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (index.js:12)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

如果您想导入一个json文件(正如我在您的代码中所看到的)，您只需要获取该文件：

fetch('./data.json').then(response => {
      console.log(response);
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
      console.log("Error Reading data " + err);
    });

然后在获取状态后更新状态。希望这能修正错误。