实现访问具有相同标题的电影的下拉菜单。反应，Axios，MovieDB API

Question

我正在制作一个电影搜索应用程序，现在我可以搜索一部电影，背景、海报图像、标题和受欢迎程度将出现在屏幕上。我遇到了一个问题，我无法访问同名的不同电影。例如，当我搜索“Joker”时，它会显示出现的第一个标题，正如您会在我的代码中注意到的那样

const title = res.data['results'][0]['title'];

'[0]' 很重要，因为它只访问搜索中的第一部电影，下面是 API 的浏览器搜索图像供参考：

现在还会有不同数量的同名电影，具体取决于搜索，并且每个电影在 API 下都被列为不同的数字。最近和流行的是[0]，然后是[1]，等等。我想我需要一个for循环或forEach来收集结果[number]然后返回所有的['original_title '] 或 ['title'] 然后在搜索而不是提交时将每个结果作为下拉菜单返回，以便用户在搜索时单击它们以自动完成。这也是我使用 React 的第一个项目，我不确定是否应该将它放在 clickHandler 内或放在其他地方。

我的大部分代码都在 Movielist.js 中，但这里是我的所有 3 个代码文件，以防万一。我不拘泥于修复它的想法，只是实现搜索具有相同标题的电影的最简单方法。

Movielist.js

import React from 'react';
import axios from 'axios';
import '../CSS/style.css'

export default class Movielist extends React.Component {
  state = {
    title: "",
    popularity: "",
    poster: "",
    background: "",
  }

    clickHandler = (event) => {
        if (event.keyCode === 13) {
           const query = event.target.value;
           const API_KEY = 'caf02a958f137f43327649b2b8721302';
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
      .then(res => {

        const title = res.data['results'][0]['title'];
        this.setState({ title });

        const popularity = res.data['results'][0]['popularity']
        this.setState({ popularity });

        const poster = res.data['results'][0]['poster_path']
        this.setState({ poster });

        const background = res.data['results'][0]['backdrop_path']
        this.setState({ background })


      })
        }
    }

  render() {
    const backgroundStyle = {
      backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
  url(https://image.tmdb.org/t/p/w500${this.state.background})`,

      backgroundSize: "cover",
      height: "100vh"
  }

    return (
      <div id="main-div" style={backgroundStyle}>
        <div id="second-div">
         <input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
         <h1 id="title">Title: {this.state.title}</h1>
         <h1 id="popularity">Popularity: {this.state.popularity}</h1>
         <img id="poster" src={`https://image.tmdb.org/t/p/w300${this.state.poster}`} />
      </div>
    </div>

    )
  }
}

App.js

import React from "react"
import Movielist from './components/Movielist'



function App() {
    return (
        <div>
            <Movielist />
        </div>

    )
}

export default App

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Answer 1

你可以做很多事情，很多方法，例如：

在clickHandler 内部将整个结果数组设置为状态：

this.setState({ results: res.data.results })

然后在渲染内部使用.map 函数迭代结果并为每个结果项渲染（返回）一些东西

<div id="main-div" style={backgroundStyle}>
<input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
  <div id="results">
    {this.state.results.map(item => {
      return (
        <div key={item.id}>
           <h1 id="title">Title: {item.title}</h1>
           <h1 id="popularity">Popularity: {item.popularity}</h1>
           Basically render whatever you want
        </div>
      )
    })}
  <div>
</div>

您可以使用.slice 类似this.state.results.slice(0, 5).map(... 的函数来限制要显示的项目数量（将分割前5 个项目）。你可以在渲染中使用它，甚至可以在使用setState时使用它