React App使用Node Fetch獲取數據

Question

我正在使用Create-React-App入門應用程序來解決問題。 我想測試使用節點獲取來獲取數據，但它似乎不起作用。 我能夠讓它與axios一起工作。

我得到的錯誤是：./~/encoding/lib/iconv-loader.js中的警告關鍵依賴關系：9：12-34依賴的請求是表達式@ ./~/encoding/lib/iconv- loader.js 9：12-34

它在webpack中似乎是一個錯誤：///./~/react-scripts/~/react-dev-utils/webpackHotDevClient.js？

我還得到一個錯誤：無法加載資源：net :: ERR_CONNECTION_TIMED_OUT，看起來fetch在發送請求時將端口附加到url： http ：//codepen.io：3000 / jobs.json

碼：

import React from 'react'
import NodeFetch from 'node-fetch' 

class NodeFetchData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jobs: []
    };
  }


  componentDidMount() {

    NodeFetch('http://codepen.io/jobs.json')
    .then(res => {
      this.setState({ jobs:res.data.jobs });
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.jobs.map(job =>
            <li key={job.hashid}>{job.company_name}</li>
          )}
        </ul>
      </div>
    );
  }
}

export default NodeFetchData;

Answer 1

我建議你使用https://github.com/github/fetch ，這是非常標准的，事實上這最近被添加為react @15.4中的peer。

對於更復雜的案例（如多個文件上傳等）， superagent變得更好！