我在第一个React js应用程序中无法获取函数。
这是我的项目的结构:
hello-world -- app -- components -- main.jsx -- node_modules -- public -- build.js -- index.html -- package.json
这是我使用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
我使用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
{ "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" } }
这是我构建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') );
如果我尝试通过浏览器运行它,它会失败(未定义获取方法),我还检查了此发布的ES6后版本“未定义获取”,并且包含的导入均未成功。我还包括es6-promise导入,但也失败了。
我究竟做错了什么?是配置问题还是什么?当我运行“ npm run build”时,没有错误,build.js似乎还可以。
这是导出的默认值,所以…
import fetch from 'isomorphic-fetch'