【问题标题】：Save submitted form values in a JSON file using React使用 React 将提交的表单值保存在 JSON 文件中
【发布时间】：2018-02-07 01:29:56
【问题描述】：

我正在尝试在 react 中创建一个表单，它将在提交时使用表单中的值更新 JSON 文件。（最终结果是，每次提交表单时，这将在 JSON 文件中创建一个数据数组，然后可用于在应用程序的其他地方填充提交结果的“列表”）

表单本身工作正常，但每次我按提交时都会收到错误消息：“TypeError: fs.writeFile is not a function”

import React, { Component } from "react";
import { Form, Button } from 'semantic-ui-react';
import jsonfile from'jsonfile';

var file = 'data.json'

var obj = {name: 'JP'}


export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      name: "",
      email: ""
    }

    this.handleChange = this.handleChange.bind(this);
    this.sendDataSomewhere = this.sendDataSomewhere.bind(this);
}


handleChange = (e, {name, value}) => {
  this.setState({[name]: value})
}

sendDataSomewhere = function jsonfile(file){
jsonfile.writeFile(file, obj, function (err) {
  console.error(err);
});
};

  render() {
    return (
     <div>
      <Form onSubmit={this.sendDataSomewhere}>
        <Form.Field>
          <Form.Input name="name" value={this.state.name} onChange={this.handleChange}/>
        </Form.Field>
        <Form.Field>
          <Form.Input name="email" value={this.state.email} onChange={this.handleChange}/>
        </Form.Field>
        <Button type="submit">Submit</Button>
       </Form>
     </div>
    );
  }
}

如果有人能告诉我我做错了什么或提供类似的例子，我将不胜感激。

谢谢

【问题讨论】：

你能更新你的sendDataSomewhere函数吗？看来你打错了。

标签： javascript json forms reactjs

【解决方案1】：

客户端解决方案是：

const handleSaveToPC = (jsonData,filename) => {
  const fileData = JSON.stringify(jsonData);
  const blob = new Blob([fileData], {type: "text/plain"});
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.download = `${filename}.json`;
  link.href = url;
  link.click();
}

【讨论】：

【解决方案2】：

客户端无法访问FS

这不可能写入客户端中的文件。

您必须提交到端点，例如节点服务器。在那里你可以使用节点模块fs。这将允许您将数据写入文件。

无法在客户端写入文件的原因是出于安全原因。

替代解决方案

如果您需要随着时间的推移汇总帖子数据，您可以在 react 中做一些事情。首先，您可以使用状态管理系统，例如 Redux 或 context api 和 hooks。当您在整个应用程序中移动时，这将保留您的数据。如果你硬刷新，你会丢失数据。

第二步是添加本地存储和“水合”您的应用的方法。这样，在删除应用缓存之前，数据都是安全的。

此解决方案比编写 Blob 并在客户端下载它们更可取。

【讨论】：

感谢您的回复。我对 javascript 相当陌生，所以我不太熟悉提交到端点的概念。您是否会知道是否有任何我可以查看的示例/教程？
查看starting express this 将向您展示如何设置服务器并制作一些端点。然后，您将向端点添加逻辑以将响应写入服务器上的 json 文件。您还必须查看如何从 recat this 发帖问题将帮助您了解基本知识。祝你好运
太好了。谢谢。

【解决方案3】：

这似乎可以离线工作。您可以使用 chrome F12 并离线或使用 Windows 飞行模式，这仍然可以保存。可能与您想要的有所不同，但请看一下。

https://www.npmjs.com/package/filesaver.js-npm

【讨论】：

【解决方案4】：

将表单值写入 JSON 文件不能直接在 react 中完成，而是创建一个微型 API 来完成这项工作。

假设 JSON 格式的表单值对象如下所示；

const formObject = {
    "name":"arif updated",
    "surname":"shariati updated"
}

现在您可以写入文件了。如果文件不存在，它将创建一个。如果已经存在，则会覆盖。

fs.writeFile('./myJSON.json', JSON.stringify(formObject), (err) => {
        if (err) console.log('Error writing file:', err);
    })
})

【讨论】：