使用superagent和reactJS在json文件中保存值

Question

我是reactJS的新手，我有一个应用程序，允许我将我的评论保存到json文件。 鉴于作者，如果我提交我的评论，它将进入comments.json。 我正在使用reactJS和supeagent。

这是代码处理视图并在localhost：3001中运行

 class App3 extends Component { constructor(props) { super(props); this.state = { items: [], text: "", author: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { this.setState({text: e.target.value}); } handleSubmit(e) { // var commentUrl = "http://localhost:3000/api/comments"; Request.get(commentUrl).then((response) => { this.setState({ id: response.body.id, author: response.body.author, text: response.body.text, }); }); // e.preventDefault(); var newItem = { id: Date.now(), author: this.state.name, text: this.state.text }; this.setState((prevState) => ({ items: prevState.items.concat(newItem), text: '' })); } render() { return ( <div className="app3"> <div className="col-sm-4"> <div className="container-fluid"> <h1>Comments</h1> <div className="commentsSection"> <AddComment items={this.state.items} /> </div> <form onSubmit={this.handleSubmit}> <textarea className="textarea" onChange={this.handleChange} value={this.state.text} /> <button className="btn btn-default">Comment</button> </form> </div> </div> </div> ); } } class AddComment extends React.Component { render() { return ( <div> {this.props.items.map(item => ( <p className="itemComment" key={item.id}>{item.text}</p> ))} </div> ); } } 

这将处理在localhost：3000上运行的json文件

 var fs = require('fs'); var path = require('path'); var express = require('express'); var bodyParser = require('body-parser'); var app = express(); var COMMENTS_FILE = path.join(__dirname, 'comments.json'); app.set('port', (process.env.PORT || 3000)); app.use('/', express.static(path.join(__dirname, 'public'))); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})); // Additional middleware which will set headers that we need on each request. app.use(function(req, res, next) { // Set permissive CORS header - this allows this server to be used only as // an API server in conjunction with something like webpack-dev-server. res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); next(); // Disable caching so we'll always get the latest comments. res.setHeader('Cache-Control', 'no-cache'); next(); }); app.get('/api/comments', function(req, res) { fs.readFile(COMMENTS_FILE, function(err, data) { if (err) { console.error(err); process.exit(1); } res.json(JSON.parse(data)); }); }); app.post('/api/comments', function(req, res) { fs.readFile(COMMENTS_FILE, function(err, data) { if (err) { console.error(err); process.exit(1); } var comments = JSON.parse(data); // NOTE: In a real implementation, we would likely rely on a database or // some other approach (eg UUIDs) to ensure a globally unique id. We'll // treat Date.now() as unique-enough for our purposes. var newComment = { id: Date.now(), author: req.body.author, text: req.body.text, }; comments.push(newComment); fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) { if (err) { console.error(err); process.exit(1); } res.json(comments); }); }); }); app.listen(app.get('port'), function() { console.log('Server started: http://localhost:' + app.get('port') + '/'); }); 

而我的comments.json文件只有{} 。

请帮忙。 非常感谢你。

Answer 1

我应该首先阅读superagent的文档
在handleSubmit事件上我添加了这个

  Request.post('http://localhost:3000/api/comments')
         .send({
          author: this.props.name,
          text: this.state.text
        })