Получение ошибок при попытке отправить POST с помощью Rails & React & jQuery

Question

Я новичок в React и создаю приложение для своей практики в Twitter. Мне удалось получить список моих твитов, однако я застрял в публикации нового твита (ajax POST).

Я получаю эти 2 ошибки на вкладке консоли Chrome при нажатии "submit":
1. POST http://localhost:3000/tweets/create 400 (неверный запрос)
2. Uncaught ReferenceError: URL не определен

И у меня есть эта ошибка в моем журнале терминала:
1. ActionController :: ParameterMissing (параметр отсутствует или значение пусто: твит):

Я весь день гуглил, но не нашел решения. Кто-нибудь может мне помочь, пожалуйста. Любой небольшой совет будет оценен.

Мои коды следующие:

TweetsPage.js:

import React from 'react'
import NewTweet from  './NewTweet'
import Tweets from './Tweets'

class TweetsPage extends React.Component {
  constructor() {
    super();
    this.state = {
      tweets: [],
      tweet: '',
    };
    this.onSubmit2 = this.onSubmit2.bind(this);
  }
  loadTweetsFromServer() {
    $.ajax({
      url: 'http://localhost:3000/tweets/index.json',
      dataType: 'json',
      type: 'GET',
      cache: false,
      success: (data) => {
        this.setState({
          tweets: data
        });
      },
      error: (xhr, status, err) => {
        console.error(url, status, err.toString());
      },
    });
  }
  onSubmit2(value) {
    console.log(value)
    $.ajax({
      url: 'http://localhost:3000/tweets/create',
      dataType: 'json', // I'm not even sure if json is the right choice.
      type: 'POST',
      cache: false,
      data: {
        tweet: this.state.tweet
      },
      success: (data) => {
        this.loadTweetsFromServer();
      },
      error: (xhr, status, err) => {
        console.error(url, status, err.toString());
      },
    });
  }
  componentDidMount() {
    this.loadTweetsFromServer();
  }
  render() {
    return (
      <div>
        <NewTweet onSubmit1={this.onSubmit2} />
        <Tweets tweets={this.state.tweets} />
      </div>
    );
  }
}

export default TweetsPage;

NewTweet.js:

import React from 'react'

class NewTweet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tweet: ''
    };
    this.getInput = this.getInput.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  getInput(e) {
    this.setState({
      tweet: e.target.value
    });
  }
  onSubmit() {
    this.props.onSubmit1(this.state.tweet);
  }
  render() {
    return (
    <div>
      <textarea onChange={this.getInput}></textarea>
      <button onClick={this.onSubmit}>submit</button>
    </div>
    );
  }
}

export default NewTweet;

tweets_controller.rb:

def create
    tweet = Tweet.new(create_params)
    tweet.user_id = current_user.id
    tweet.save
end

private
  def create_params
    params.require(:tweet).permit(:user_id, :tweet)
  end

конфиг / routes.rb:

get 'tweets/index' => 'tweets#index'
post 'tweets/create' => 'tweets#create'

Я вызываю TweetsPage для index.html.erb, используя react_component. (Примечание: я также импортирую твиты в TweetsPage, но я собираюсь пропустить их, потому что эта часть работает нормально.)
То, что console.log в onSubmit2 в TweetPage.js дает мне то, что я печатаю (как и должно быть), поэтому я полагаю, что это часть ajax POST, которая вызывает у меня головную боль. Пожалуйста, дайте мне знать, если мне не хватает какой-либо информации. Спасибо.

Answer 1

Итак, я изменил onSubmit2, как показано ниже, и это решило проблему.

onSubmit2(value) {
    console.log(value)
    const url = 'http://localhost:3000/tweets/create';
    $.ajax({
      url: url,
      dataType: 'text',
      type: 'POST',
      cache: false,
      data: {
        tweet: value
      },
      success: (data) => {
        this.loadTweetsFromServer();
      },
      error: (xhr, status, err) => {
        console.error(url, status, err.toString());
      },
    });
  }

Answer 2

В onSubmit2 вы передаете this.state.tweet в данные в вызове ajax, но это всегда пустая строка.Значение находится в переменной value.Попробуйте использовать это вместо этого.

this.state для каждого компонента, поэтому, даже если вы вызвали this.setState в NewTweet, это не влияет на состояние внутри TweetsPage.

Также в обработчике ошибок в onSubmit2 вы используете неопределенную переменную url.