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

Question

我有一个本地JSON文件,用于将所有数据加载到app.在一个组件中,我加载了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])
    });
}

Answer 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，并且不仅仅希望能够在刷新后使用它，那么您应该在后端执行此操作。您还可以让用户手动保存文件（通过下载提示），如此处所述。