Question

嘿所有我正在做一个非常简单的React Application项目，但是我的编译器一直告诉我。然后是一个意外的令牌。我用npm install fetch --save安装了fetch api。它在package.json文件中列为依赖项。

我的代码出错吗？或者我是否必须安装npm包才能使用.then方法。继承我的代码

import React from 'react';
import {FormGroup, FormControl, InputGroup, Glyphicon} from 'react-bootstrap';

class Global extends React.Component {
  constructor(props) {
    super(props)
    this.state = {query: ''};
  }
  search() {
    const BASE_URL = 'https://www.googleapis.com/books/v1/volumes?q=';
    fetch(`${BASE_URL}${this.state.query}`, {method: 'GET'});
    .then(response => response.json());
    .then(json => console.log(json))
    console.log('search', this.state.query)
  }

  render() {
    return(
     <div className="global">
       <h2> Book Explorer!</h2>
       <FormGroup>
         <InputGroup>
         <FormControl type="text" placeholder="search for a book" onChange={event => this.setState({query: event.target.value})} onKeyPress={event => {
           if(event.key === 'Enter') {
             this.search();
           }
           }}/>
         <InputGroup.Addon onClick={() => this.search()}>
         <Glyphicon glyph="search"></Glyphicon>
        </InputGroup.Addon>
        </InputGroup>
        </FormGroup>
      </div>
    )
  }
}

export default Global;

这也是我在package.json

中的依赖项

  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "fetch": "^1.1.0",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-bootstrap": "^0.31.1",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "redux": "^3.0.4"

Answer 1

您不应通过放置';'来结束陈述。应该将承诺链接在一个声明中：

const BASE_URL = 'https://www.googleapis.com/books/v1/volumes?q=';

    fetch(`${BASE_URL}${this.state.query}`, {method: 'GET'})
    .then(response => response.json())
    .then(json => console.log(json));

    console.log('search', this.state.query)

然后承诺不编译fetch api

1 个答案: