如何将新状态保存到本地 json答案

【问题标题】：How to save new state to local json如何将新状态保存到本地 json
【发布时间】：2017-03-15 13:40:57
【问题描述】：

我有一个本地 JSON 文件，用于将所有数据加载到应用程序。在一个组件中，我加载了constructor() 这些数据。在函数addRow() 中，我添加了新字段，但它只是在本地状态变量中。我也想将它添加到 json 文件中，所以刷新后这个新行将仍然存在。

我试图找出这个问题的解决方法真的很容易，但我没有找到。如果您知道某些主题，请发送给我。

constructor() {
    super();
    this.state = {
        employees: require('json!../../../data/employees.json')
    };
    this.addEmployee = this.addEmployee.bind(this);
}

addEmployee(employee) {
    this.setState({
        employees: this.state.employees.concat([employee])
    });
}

【问题讨论】：

POST 请求 + 服务器端脚本写入 json 文件。
或者一些 javascript (node.js) 的 react 插件可以与 json 一起使用
不，你不能只用客户端代码编写文件，你需要后端。

标签： javascript json reactjs

【解决方案1】：

出于安全原因，您无法从浏览器访问文件系统。如果你只是想在刷新后访问它，我想你可以在修改状态时将它保存在 localStorage 中，然后在组件加载时使用它，如果它不是未定义的（你可以在 componentDidMount 中检查）。（以下代码未经测试）

addEmployee(employee) {
    let newEmployees = this.state.employees.concat([employee])
    localStorage.setItem('employees', JSON.stringify(newEmployees));
    this.setState({
        employees: newEmployees
    });
}


componentDidMount(){
     let newEmployees = localStorage.employees
     if(newEmployees != undefined){
         this.setState({
             employees: JSON.parse(newEmployees)
         });
     }
}

如果您想持久地存储该 JSON，并且希望在刷新后能够使用它，您应该在后端进行。您还可以让用户手动保存文件（带有下载提示），如 here 所述。

【讨论】：

不应该是if (localStorage.employees != undefined) { 而应该是employees
Plus 在添加时给我一个错误Uncaught TypeError: JSON.stringfy is not a function(…)。我必须为它导入一些库吗？我以为它是一个内置函数。
是的，它是 newEmployees（或 localStorage.employees）和 stringify，我编辑了答案，当你从 localStorage 获取字符串化的 JSON 时，你也应该解析它。
您也可以帮忙吗？我试过这样。 pastebin.com/sVqkLMAH。它给了我map is not a function
在编辑后的答案中，我已经添加了 JSON.parse 方法以从字符串中获取对象，以便您可以直接将 map 与从状态中获取的对象一起使用 :) this.setState({ employees: JSON.parse(newEmployees) });跨度>

【解决方案2】：

无法从客户端/浏览器执行此操作，因为它们无权访问文件系统（出于安全考虑）。您将在后端执行此操作。

【讨论】：