React 与 Ruby on Rails 的集成。答案

【问题标题】：Integration in React with Ruby on Rails.React 与 Ruby on Rails 的集成。
【发布时间】：2019-01-07 18:42:16
【问题描述】：

我按照教程中关于将 React 与 Ruby on Rails 集成的说明进行操作。我安装了 webpack 'webpacker'、'haml' 和 'ransack'。我所有的后端代码现在都在工作。

我创建了一个指向我的 jsx 文件的视图。在 Hello World 尝试中，jsx 正确呈现。我的问题是在那之后。

我创建了一个 JobOffers.jsx 文件。所以，在我的仪表板文件中，我指向了另一个。

这是我的dashboard.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import JobOffers from './JobOffers'


document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <JobOffers/>
  )
})

这是我的 JobOffer.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class JobOffers extends Component {

  constructor(props) {
    super(props);

    this.state = {
      term: '',
      autoCompleteResults: [],
      itemSelected: {},
      showItemSelected: false
    };

    $.getJSON('/search?q=' + this.state.term)
      .then(response => this.setState({ autoCompleteResults: response.items }))
  }

  getAutoCompleteResults(e){
    this.setState({
      term: e.target.value
    }, () => {
      $.getJSON('/search?q=' + this.state.term)
        .then(response => this.setState({ autoCompleteResults: response.items }))
    });
  }

  render(){
    let autoCompleteList = this.state.autoCompleteResults.map((response, index) => {
      return <div key={index}>
        <h2>{response.title}</h2>
        <p>{response.description }</p>
      </div>
    });

    return (
      <div>
        <input ref={ (input) => { this.searchBar = input } } value={ this.state.term } onChange={ this.getAutoCompleteResults.bind(this) } type='text' placeholder='Search...' />
        { autoCompleteList }
      </div>
    )
  }
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <JobOffers />,
    document.body.appendChild(document.createElement('div')),
  )
});

export default JobOffers;

当我转到该页面时，它会在不到一秒钟的时间内呈现正确的输入，然后消失。有人知道我在这里做错了什么吗？

【问题讨论】：

将请求从constructor移动到componentDidMount
谢谢利奥。它有效

标签： ruby-on-rails ruby reactjs

【解决方案1】：

dashboard.jsx：

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import JobOffers from './JobOffers'


document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <JobOffers/>,
    document.body.appendChild(document.createElement('div')),
  )
})

JobOffers.jsx：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class JobOffers extends Component {

  constructor(props) {
    super(props);

    this.state = {
      term: '',
      autoCompleteResults: [],
      itemSelected: {},
      showItemSelected: false
    };
  }

  componentDidMount() {
    $.getJSON('/search?q=' + this.state.term)
      .then(response => this.setState({ autoCompleteResults: response.items }))
  }

  getAutoCompleteResults(e){
    this.setState({
      term: e.target.value
    }, () => {
      $.getJSON('/search?q=' + this.state.term)
        .then(response => this.setState({ autoCompleteResults: response.items }))
    });
  }

  render(){
    let autoCompleteList = this.state.autoCompleteResults.map((response, index) => {
      return <div key={index}>
        <h2>{response.title}</h2>
        <p>{response.description }</p>
      </div>
    });

    return (
      <div>
        <input ref={ (input) => { this.searchBar = input } } value={ this.state.term } onChange={ this.getAutoCompleteResults.bind(this) } type='text' placeholder='Search...' />
        { autoCompleteList }
      </div>
    )
  }
}

export default JobOffers;

【讨论】：