Question

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

表单本身工作正常但每次按下提交我都会收到错误：＆＃34; TypeError：fs.writeFile不是函数＆＃34;

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>
    );
  }
}

如果有人能让我知道我做错了什么或提供类似的例子，我会非常感激。

由于

Answer 1

客户端解决方案是：

10.244.0.0/16,10.90.0.0/16

Answer 2

客户端无法做到这一点。

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

由于安全原因，无法写入客户端中的文件的原因。

Answer 3

这似乎可以离线使用。您可以使用Chrome F12脱机或使用Windows飞行模式，但这仍会保存。可能与您所希望的有所不同，但请看一下。

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

Answer 4

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

假设您的表单值对象为 JSON，如下所示；

There was an unexpected error (type=Internal Server Error, status=500).
could not deserialize; nested exception is org.hibernate.type.SerializationException: could not deserialize
org.springframework.orm.jpa.JpaSystemException: could not deserialize; nested exception is org.hibernate.type.SerializationException: could not deserialize
    at org.springframework.orm.jpa.vendor.HibernateJpaDialect.convertHibernateAccessException(HibernateJpaDialect.java:353)
    at org.springframework.orm.jpa.vendor.HibernateJpaDialect.translateExceptionIfPossible(HibernateJpaDialect.java:255)
    at org.springframework.orm.jpa.AbstractEntityManagerFactoryBean.translateExceptionIfPossible(AbstractEntityManagerFactoryBean.java:528)
    at org.springframework.dao.support.ChainedPersistenceExceptionTranslator.translateExceptionIfPossible(ChainedPersistenceExceptionTranslator.java:61)
    at org.springframework.dao.support.DataAccessUtils.translateIfNecessary(DataAccessUtils.java:242)
    at org.springframework.dao.support.PersistenceExceptionTranslationInterceptor.invoke(PersistenceExceptionTranslationInterceptor.java:153)
    at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:186)
    at org.springframework.data.jpa.repository.support.CrudMethodMetadataPostProcessor$CrudMethodMetadataPopulatingMethodInterceptor.invoke(CrudMeth

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

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

使用React将提交的表单值保存在JSON文件中

4 个答案: