Javascript 如何实现API搜索onClick

我的项目使用React、Axios和movieDB的API。我正在尝试这样做，当我键入电影标题并点击enter和/或单击submit时，API将返回作为h1元素搜索的电影标题

目前，只要我刷新浏览器，代码就会工作，它正常工作的唯一方法是进入代码并用我想要搜索的内容替换

${query}

，即

joker

。我已尝试将onclick添加到按钮：

submit

。然而，这并没有起到任何作用

App.js

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



function App() {
    return (
        <div>
            <input type="search" />
            <button onclick="componentDidMount()">submit</button>
            <h1 id="title">title</h1>
            <Movielist />
        </div>

    )
}

export default App

从“React”导入React
从“./components/Movielist”导入Movielist
函数App（）{
返回(
提交
标题
)
}
导出默认应用程序

Movielist.js

import React from 'react';

import axios from 'axios';

export default class Movielist extends React.Component {
  state = {
    title: ""
  }

  componentDidMount() {
    const API_KEY = '*****************';
    const query = document.getElementById('search');
    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 });

      })
  }

  render() {
    return (

    <h1>{this.state.title}</h1>

    )
  }
}

从“React”导入React；
从“axios”导入axios；
导出默认类Movielist扩展React.Component{
状态={
标题：“
}
componentDidMount（）{
常量API_KEY='******************'；
const query=document.getElementById（'search'）；
axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&query=${query}`）
。然后（res=>{
const title=res.data['results'][0]['title']；
this.setState（{title}）；
})
}
render（）{
返回(
{this.state.title}
)
}
}

index.js

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

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

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
ReactDOM.render(
,
document.getElementById（'root'））
);

您在这里有一些错误：

• 你的应用程序的结构不是很好，例如，分离你的API调用
• 您正在调用生命周期方法，这些方法将自动调用
• 不要在React中使用像getElementById这样的DOM选择器
• 用例事件侦听器（onclick应该是onclick）
• 对事件侦听器使用回调，否则它们将立即触发
• 您在stackoverflow中包含了API密钥，这是一个大错误

试试这个：

import React，{useState}来自“React”；
const MovielistSearch=props=>(
props.saveSearchInput（e.target.value）}/>
props.handleSearch（）}>
搜寻
);
const getMovies=props=>{
返回[‘标题1’、‘标题2’、‘标题3’]；
//在这里添加真正的API
//常量API_键=“”；
//const getMovies=等待axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${props.searchTerm}`）；
//返回getMovies.data；
}
const MovieList=道具=>(

{props.foundMovies.map（thisMovie=>
{thisMovie}
）}

);
常量应用=（）=>{
const[searchInput，setSearchInput]=useState（“”）；
const[foundMovies，setFoundMovies]=useState（[]）；
const movieSearch=（）=>{
if（searchInput==null）返回；
const foundMovies=getMovies（searchInput）；
setFoundMovies（foundMovies）；
}
返回(
电影列表
)
}
ReactDOM.render（，document.getElementById（'app'））

问题可能在这里：

const query = document.getElementById('search');

---

它返回一个HTML元素。尝试document.getElementById（'search'）.innerText

我应该把它放在哪里？只需在ComponentDidMount（）之前添加（）=>我尝试将它添加到App.js中的按钮和Movielist.js中的

ComponentDidMount（）

。我不太清楚你的意思，有没有一种方法可以让你用编辑过的代码来回应。它返回这个错误

TypeError:document.getElementById（…）is null

尝试向输入元素添加ID：不再返回错误，但当我单击submit nothing Happens时，您需要获取输入值并将其存储在查询变量中。const query=document.getElementById（'search'）。值；我建议console.log（）查询，这样您就可以确切地知道它的值。不要在React中使用DOM选择器

const query = document.getElementById('search');