Javascript 如何使用星球大战SWAPI从服务器搜索端点

我试图向服务器端端点添加一个搜索查询，该端点调用swapi——星球大战API

https://swapi.co/

并按姓名列出人员

下面是App.js中对后端的fetch调用的样子（我使用的是reactJS框架）：

---

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

您没有在

获取请求中向后端传递搜索词

如果确实要搜索输入字段中的每个更改，可以使用
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) => { ... })

在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;

谢谢@Tholle。服务器端查询是否如下所示：
app.get（'/people/？search=$event.target.value'，（req，res）=>{swapi.get（'https:swapi.co/api/people/？search=$event.target.value'）。然后（（结果）=>{…}）
@ksenia抱歉，我忘记了。我更新了答案。好吧，但是
swapi.get
端点字符串是什么样子的？@ksenia
swapi.get
看起来怎么样。你现在试过了吗？如果你好奇，问题出在代理中。http vs https…现在解决了！
app.get('/people', (req, res) => { ... })

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!'))