从 Webpacker 获取 API 不与 Rails + React 一起工作

Question

如何开始工作 Fetch API with Rails and React.

设置：Rails 5，来自 Webpacker 的 Sprockets 和 React。

我在这里想要实现的是使用 Fetch API 来获取数据并将其加载到 ReactBootstrapTable API.

import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import 'whatwg-fetch'

class ExampleTable extends React.Component {
  
  constructor() {
    super();
    this.state = {
      datatable: [], // I'm not sure if I can use array to json data.
    };
  } 
  
  // I'm new to React, so I'm not sure if I'm passing props right  
  componentDidMount() {
    console.log('start componentDidMount');
    fetch('https://www.test.com/test.json')
    .then(function(response) {
      return response.json();
    }).then(function(response) {
        let datatable = response;
        this.setStates({ datatable });
    }).catch(function(ex) {
      console.log('parsing failed', ex);
    });
  }
  
  render() {
    return (
      <div>
        <BootstrapTable
          data={this.states.datatable} //Here, I'm passing data to the table
          pagination
          striped hover condensed
          options={ { noDataText: 'Empty Table' } }>
          
          <TableHeaderColumn isKey dataField='id' width='80px' dataAlign='center'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='test'width='300px' dataAlign='left'>
            Test
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}
 
export default ExampleTable;

这里的主要问题是我无法使用 Fetch API 而且我也不完全确定我将数据传递给 table 的方式（基本上是如何使用反应）

我正在从我的 IDE

中得到一个 error/warning

fetch is not defined

还有来自 Firefox 控制台的另一条错误消息：

The above error occurred in the component: in ExampleTable

TypeError: this.states is undefined

我通过 yarn 安装了 Fetch API 并检查了 node_modules/whatwg-fetch 文件夹。正如 github API 中所述，我导入了 'whatwg-fetch'，如上面的代码所示。

我不知道我还应该做什么。我以同样的方式安装了 ReactBoostrapTable 并且成功了。其他一切正常。

Answer 1

我查看了与 webpack 一起使用的 fetch installation instructions，它说要将此添加到您的 webpack 配置中：

entry: ['whatwg-fetch', ...]

此外，您提到了另一个错误 TypeError: this.states is undefined。看起来你有错字。在 React 中，如果你试图引用状态，你可以像这样使用它：

this.state.datatable

在你的render方法中，你指的是this.states。

此外，当您使用 fetch 进行调用时，您正在尝试调用 this.setStates。您应该像这样使用它：

this.setState({ somestate: "xyz"})

从 Webpacker 获取 API 不与 Rails + React 一起工作

Fetch API not working with Rails + React from Webpacker

ruby-on-rails

reactjs

fetch-api

webpacker