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

Answer 2

无法从客户端/浏览器执行此操作，因为他们无法访问文件系统（表单安全注意事项）。您将在后端执行此操作。

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

2 个答案: