React rails渲染主页视图

Question

我有rails API并对单独的app做出反应。我可以从控制台的rails视图主页获取数据。如何使用react渲染它？我的反应代码如下：

    import React, { Component } from 'react';
    import axios from 'axios'

    class HomePage extends Component {

      componentDidMount(){
        axios.get('http://localhost:3001/')
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
      }
      render(){
        return(
          <h1>{this.response}</h1>
        )
      }
    }

export default HomePage

Answer 1

您可以将回复存储在state中，例如作为data，然后呈现this.state.data。

Answer 2

如果要在渲染中调用它，则需要全局声明response。你现在的方式，this.response并没有附加任何东西。科林击中了头上的钉子 -

class HomePage extends Component {
      constructor(){
        super();
        this.state = {
          heading: ''
        }
      }

      componentDidMount(){
        axios.get('http://localhost:3001/')
        .then(function (response) {
          this.setState({
            heading: response.data
          })
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
      }

      render(){
        return(
          <h1>{this.state.data}</h1>
        )
      }
    }