node.js React 中未使用 ES6 fetch 定义 fetch 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39707954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fetch method is not defined using ES6 fetch in React
提问by mannuk
I have a trouble with fetch functions in my first react js app.
我在我的第一个 react js 应用程序中遇到了获取函数的问题。
This is the structure of my project:
这是我的项目结构：
hello-world
-- app
-- components
-- main.jsx
-- node_modules
-- public
-- build.js
-- index.html
-- package.json
This is what I've installed using npm:
这是我使用 npm 安装的：
npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react webpack --save-dev
npm install --save isomorphic-fetch es6-promise
I use webpack webpack.config
我使用 webpack webpack.config
module.exports = {
entry: './app/components/main.jsx',
output: {
path: './public/',
filename: "build.js",
},
module: {
loaders: [
{
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
package.json
包.json
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "webpack -w"
},
"author": "mannuk",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"react": "^0.14.8",
"react-dom": "^0.14.8",
"webpack": "^1.13.2"
},
"dependencies": {
"es6-promise": "^3.3.1",
"isomorphic-fetch": "^2.2.1"
}
}
This is the file where I build the UI:
这是我构建 UI 的文件：
main.jsx
主文件
import React from 'react';
import ReactDOM from 'react-dom';
import 'isomorphic-fetch';
import 'es6-promise';
class Person extends React.Component {
constructor(props){
super(props);
this.state = {people : []};
}
componentWillMount(){
fetch('xxx/people',
method: 'get',
headers: {'token' : 'xxx'}
)
.then((response) => {
return response.json()
})
.then((people) => {
this.setState({ people: people })
})
}
render(){
return <div>
<input type="text" value={this.state.people[0].name}></input>
</div>
}
}
ReactDOM.render(
<Person/>,
document.getElementById('container')
);
If I try to run it through the browser it fails (fetch method is not defined) I have also checked this releated post ES6 `fetch is undefined`and I have included the import with no success. I also included es6-promise import but it fails too.
如果我尝试通过浏览器运行它会失败（未定义 fetch 方法）我还检查了这篇相关的ES6 `fetch is undefined`并且我没有成功包含导入。我还包含了 es6-promise 导入，但它也失败了。
What am I doing wrong? Is it a config problem or what? When I run 'npm run build' there is no error and the build.js seems to be ok.
我究竟做错了什么？是配置问题还是什么？当我运行 'npm run build' 时没有错误并且 build.js 似乎没问题。
回答by D. Walsh
It's an exported default, so...
这是一个导出的默认值，所以...
import fetch from 'isomorphic-fetch'
回答by Tim Reynolds
Adding a polyfill for this is the correct approach. Looking at one of my latest projects you just need to do the following imports;
为此添加 polyfill 是正确的方法。查看我的最新项目之一，您只需要进行以下导入；
import promise from 'es6-promise';
import 'isomorphic-fetch';
promise.polyfill();
It looks like you've not quite got the es6-promise import correct which requires the .polyfill() method be called. I'd recommend putting these in the entry point of the application as you should only need to import them once.
看起来您还没有完全正确地进行 es6-promise 导入，这需要调用 .polyfill() 方法。我建议将它们放在应用程序的入口点，因为您只需要导入它们一次。
I'd also recommend you include the babel polyfill;
我还建议您包含 babel polyfill；
import 'babel-polyfill';
