0
问题是我正在做一个Fetch POST请求，通过React-Router传递值并通过Rails后端传递值。 JSON请求主体对象在获取调用之前是正确的，但请求主体在请求时显示空值。React路由器获取JSON POST空值
RootsController.rb
class RootsController < ApplicationController
def index
@events = Event.order("event_date DESC")
@news = New.order("created_at DESC")
@products = Product.all
@buys = Buy.order(:business_name)
@contributors = Contributor.all
end
def new
@contact = Contact.new
end
def create
@contact = Contact.new(contact_params)
if @contact.save
render json: @contact
ReviewMailer.new_review(@review).deliver_later
end
end
private
def contact_params
params.require(:contact).permit(:first_name, :last_name,
:email, :contact_number, :message)
end
end
contacts_controller.rb
class Api::V1::ContactsController < ApiController
def index
render json: Contact.all
end
def create
render json: Contact.new
end
end
Contact.js
import React, { Component } from 'react';
class Contact extends Component {
constructor(props) {
super(props);
this.state = {
first_name: "",
last_name: "",
email: "",
contact_number: "",
message: ""
}
this.submitForm = this.submitForm.bind(this);
this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
this.handleLastNameChange = this.handleLastNameChange.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handleContactNumberChange = this.handleContactNumberChange.bind(this);
this.handleMessageChange = this.handleMessageChange.bind(this);
}
handleFirstNameChange(e){
this.setState({ first_name: e.target.value })
}
handleLastNameChange(e){
this.setState({ last_name: e.target.value })
}
handleEmailChange(e){
this.setState({ email: e.target.value })
}
handleContactNumberChange(e){
this.setState({ contact_number: e.target.value })
}
handleMessageChange(e){
this.setState({ message: e.target.value })
}
submitForm(e){
e.preventDefault();
let reqBody = {first_name: this.state.first_name.trim(),
last_name: this.state.last_name.trim(),
email: this.state.email.trim(),
contact_number: this.state.contact_number.trim(),
message: this.state.message.trim()
};
fetch('http://localhost:3000/api/v1/contacts.json', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: 'post',
body: JSON.stringify(reqBody)
})
.then(response => {
if (response.ok) {
return response;
} else {
let errorMessage = `${response.status} ($response.statusText)`,
error = new Error(errorMessage);
throw(error);
}
})
.then(response => response.json())
.then(response => {console.log(response.json)})
.catch(error => console.error(`Error in fetch:
${error.message}`))
this.props.history.push('/Submitted')
}
render() {
return (
<div className="center-container">
<div className="center-item">
<div className="container">
<form onSubmit={this.submitForm}>
<input type="text" value={ this.state.first_name }
onChange={ this.handleFirstNameChange } />
<input type="text" value={ this.state.last_name }
onChange={ this.handleLastNameChange } />
<input type="text" value={ this.state.email }
onChange={ this.handleEmailChange } />
<input type="text" value={
this.state.contact_number } onChange={ this.handleContactNumberChange }
/>
<input type="text" value={ this.state.message }
onChange={ this.handleMessageChange } />
<input type="submit" value="Submit"/>
</form>
</div>
</div>
</div>
)
}
}
export default Contact;
main.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link, Switch, Match, Redirect, Hash } from 'react-router-dom'
import AboutUs from './components/AboutUs';
import Splash from './components/Splash';
import Buy from './components/Buy';
import Business from './components/Business';
import Contributors from './components/Contributors';
import Contributor from './components/Contributor';
import Contact from './components/Contact';
import NewsEvents from './components/NewsEvents';
import NewsItem from './components/NewsItem';
import EventsItem from './components/EventsItem';
import Products from './components/Products';
import Product from './components/Product';
import Submitted from './components/Submitted';
$(function() {
let reactApp = document.getElementById('app')
if(reactApp){
ReactDOM.render(
<Router>
<div>
<header className="main-header">
<h1 className="Logo"><Link to="/">Funky Fresh</Link></h1>
<ul className="main-nav">
<Link to="/NewsEvents">News and Events</Link>
<Link to="/AboutUs">About Us</Link>
<Link to="/Products">Products</Link>
<Link to="/Buy">Where to Buy</Link>
<Link to="/Contributors">Contributors</Link>
<Link to="/Contact">Contact Us</Link>
</ul>
</header>
<Route exact path="/" component={Splash}/>
<Route path="/AboutUs" component={AboutUs}/>
<Route path="/Buy" component={Buy}/>
<Route path="/Buy/Business" component={Business}/>
<Route path="/Contributors" component={Contributors}/>
<Route path="/Contributors/Contributor" component={Contributor}/>
<Route path="/Contact" component={Contact}/>
<Route path="/Products" component={Products}/>
<Route path="/Products/Product" component={Product} />
<Route path="/NewsEvents" component={NewsEvents} />
<Route path="/NewsEvents/NewsItem" component={NewsItem} />
<Route path="/Submitted" component={Submitted} />
</div>
</Router>,
reactApp
);
};
});