1
私はreactJSで新しく、私はjsonファイルに自分のコメントを保存できるアプリがあります。著者が与えられた場合、私のコメントを提出すれば、それはcomments.jsonに入るでしょう。私はreactJSとsupeagentを使用しています。スーパーエージェントとreactJSでjsonファイルの値を保存
これはコードビューを処理し、ローカルホストで実行されている：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>
);
}
}、これはローカルホストで動作JSONファイルハンドル：3000
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 (e.g. 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ファイルには{}しかありません。
助けてください。どうもありがとうございました。
、 'handleSubmit'）は' Request.post（commentUrl）.then（（応答する必要がありますを追加しました。 ..' – anoop