Question

我试图将搜索查询添加到服务器端端点，该端点调用swapi-《星球大战》 API https://swapi.co/并按名称列出人员。

这是App.js中对后端的访存调用的样子（我正在使用reactJS框架）：

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      searchResult: [],
    }
  }

    searchPersonByName = (event) => {
    fetch('/people/?search='+ event.target.value)
      .then(response => response.json())
      .then(response => {
        //let searchResult = JSON.parse(responseBody).results;
        console.log(response);
        this.setState({ searchResult: response.results });
      })
  }
render() {
    return (
      <div className="pageStyle">
        <div className="searchBar">
          <input type="text"
            placeholder="search for a person"
            onChange={this.searchPersonByName}>
          </input>
          {Object.keys(this.state.searchResult).map((item, i) => (
            <li key={i}>
              <span>{this.state.searchResult[item].name}</span>
            </li>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

在后端：

    //Dependencies
    const swapi = require('swapi-node');
    const express = require('express'); //express server
    const app = express();

    app.use(express.static('public'))

    //Search people endpoint
    //format of the search string:
    // https://swapi.co/api/people/?search=
    app.get('/people', (req, res) => {
    let query = req.query.search;
    console.log(query);
    swapi.get('https://swapi.co/api/people/?search=' + query).then((result) => {
        console.log(result.results);
        let results = result.results;
        res.send({ results });
    }).catch((err) => {
        console.log(err);
    });
});
//server listening on specified port
app.listen(4000, () => console.log('Listening on port 4000!'))

现在，搜索查询仅从第一页返回人员。缺少什么？

Answer 1

您没有通过fetch请求将搜索字词传递给后端。

如果您确实想搜索输入字段中的每个更改，则可以使用event.target.value作为搜索词。

searchPersonByName = event => {
  fetch(`/people?search=${event.target.value}`)
    .then(response => response.json())
    .then(response => {
      this.setState({ searchResult: response.results });
    });
};

您也无需在后端路由中指定查询参数。

app.get('/people', (req, res) => { ... })

Answer 2

在App.js中获取调用

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      searchResult: [],
    }
  }

    searchPersonByName = (event) => {
    fetch('/people/?search='+ event.target.value)
      .then(response => response.json())
      .then(response => {
        //let searchResult = JSON.parse(responseBody).results;
        console.log(response);
        this.setState({ searchResult: response.results });
      })
  }

render() {
    return (
      <div className="pageStyle">
        <div className="searchBar">
          <input type="text"
            placeholder="search for a person"
            onChange={this.searchPersonByName}>
          </input>
          {Object.keys(this.state.searchResult).map((item, i) => (
            <li key={i}>
              <span>{this.state.searchResult[item].name}</span>
            </li>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

和后端：

//Dependencies
const swapi = require('swapi-node'); 
const express = require('express'); //express server
var bodyParser = require('body-parser');
const app = express();

app.use(express.static('public'));
app.use(bodyParser.json({ type: 'application/json' }));

var API_URL = 'http://swapi.co/api/';

//Search people endpoint
//format of the search string:
// https://swapi.co/api/people/?search=
app.get('/people', (req, res) => {
    let query = req.query.search;
    console.log(query);
    swapi.get('http://swapi.co/api/people/?search=' + query).then((result) => {
        console.log(result.results);
        let results = result.results;
        res.send({ results });
    }).catch((err) => {
        console.log(err);
    });
});

//server listening on specified port
app.listen(4000, () => console.log('Listening on port 4000!'))

如何使用《星际大战》 SWAPI API从服务器搜索端点

2 个答案: