Question

问题是我正在执行一个Fetch POST请求，它通过带有Rails后端的React-Router传递值。 JSON请求正文对象在获取调用之前是正确的，但请求正文在请求时显示空值。

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

Answer 1

已解决，需要将contact_params传递给apiController。

React Router获取JSON POST空值

1 个答案: