Css 实现一个下拉菜单，可以访问具有相同标题的电影。React、Axios、MovieDB API

我正在制作一个电影搜索应用程序，现在我可以搜索一部电影，背景、海报图像、标题和人气都会显示在屏幕上。我遇到了一个问题，我无法访问同名的不同电影。例如，当我搜索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')
);

---

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

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

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

然后在render内部使用.map函数迭代结果，并为每个结果项render返回一些内容

<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函数来限制要显示的项目数，如下面的.state.results.slice0，5.map。。。将切片前5个项目。你可以在渲染中使用它，甚至当你使用setState时，我应该把它放在渲染中的什么地方？无论你想渲染到哪里：刚刚添加了一些说明，希望它现在有意义