Javascript 如何使用Axios在React中实现onClick componentDidMount（）

我正在尝试使用React、Axios和movieDB API制作一个电影搜索函数。我现在尝试实现的功能是在搜索栏中键入一部电影，然后单击submit按钮将电影标题作为H1元素返回

我的onClick函数不起作用：clickHandler}>submit

componentDidMount仅在页面刷新时工作，并且由于submit按钮已损坏，您无法搜索任何内容

我不知道如何实现这一点，但我也不介意我是否可以通过按enter键而不是使用按钮来搜索它，无论哪个更容易

这是到目前为止我的代码

App.js

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



function App() {
    return (
        <div>
            <input type="search" id="search" />
            <button onClick={(e)=>clickHandler()}>submit</button>
            <h1 id="title">title</h1>
            <Movielist />
        </div>

    )
}

export default 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').value;
    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>

    )
  }
}

index.js

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

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

---

如果要在用户按下提交按钮后查询API。您应该将对API的调用放入调用处理程序中，然后将状态作为道具从应用程序传递给MovieList

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

    clickHandler() {
        const API_KEY = '***********************';
        const query = document.getElementById('search').value;
        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 (
            <div>
                <input type="search" id="search" />
                <button onClick={(e)=>clickHandler()}>submit</button>
                <h1 id="title">title</h1>
                <Movielist list={this.state.title}/>
            </div>

        )
    }
}

export class MovieList extends React.Component {
    render() {
         <h1>{this.props.title}</h1>
    }
}

---

或者，您可以将输入包装在一个元素中并使用onSubmit+evt.preventDefault，这样您可以处理按钮单击并按Enter键提交。

您应该在点击按钮后调用API获取电影列表，然后将您获得的数据传递给Movielist。试试这个： 在App.js中：

从React导入React 从“axios”导入axios 从“./components/Movielist”导入Movielist 功能应用程序{ 常量[movieList，setMovieList]=React.useState[] const handleOnSubmit==>{ 常量API_KEY='************************'； const query=document.getElementById'search'。值； axios.get`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&query=${query}` .thenres=>{ const title=res.data['results'][0]['title']； setMovieListres.data['results'] } } 回来 提交 标题 } 导出默认应用程序

---

只需将调用api句柄移动到onclik func，然后将标题道具传递到电影列表

我收到一个错误，错误是：./src/App.js第10:35行：“clickHandler”未定义无未定义，当我尝试将导入添加到App.js中时，如此导入从React导入Movielist from./components/Movielist”导入clickHandler from“./components/Movielist”返回错误。/src/components/Movielist.js模块未找到：无法解析“/components/Movielist”在'D:\Web Development\React Projects\moviesearch\src\components'尝试移动常量clickHandler=>。。。。在你的应用程序func sr中：DDo我把它放在函数App下了？很抱歉，我把App.js代码错当成了Movielist.js。但是现在我改变了，我得到的错误是错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：1。您可能有不匹配的React和渲染器版本，如React DOM 2。你可能违反了Hooksoh的规则，这是因为你的应用程序是func组件，而你的电影列表是class组件。尝试将电影列表切换到func组件。钩子功能仅在func组件中运行：DI收到此错误。/src/App.js第10:35行：“clickHandler”未定义没有未定义的“``从React导入React”；导入./styles.css；导出类应用程序扩展了React.Component{clickHandlerevent{if event.keyCode==13{const query=event.target.value；const API_KEY='**************************'；console.logevent.target.value}}呈现{return；}“``这只是将我在文本框中写的内容放入控制台，而不是从API中获取电影的标题并将其作为h1元素返回。没问题，我已经更新了我的原始答案。Try it.keyCode for enter key is 13I'm get error:./src/App.js Line 28:1:解析错误：每个模块只允许一个默认导出。这是因为我将两个脚本（假定位于两个不同文件中）放入一个脚本块中。如果要将MovieList和App放在同一个文件中，则需要从导出默认类App和导出默认类MovieList中删除一个或两个默认值，具体取决于项目文件的结构。

import React from 'react';

import axios from 'axios';

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

    clickHandler = (event) => {
        if (event.keyCode === 13) {
           const query = event.target.value;
           const API_KEY = '***********************';
    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 (

<input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
    <h1>{this.state.title}</h1>

    )
  }
}

import React, {useState} from "react"
import axios from 'axios';
import Movielist from './components/Movielist'

const [title, setTitle] = useState("")
const API_KEY = '***********************'

function App() {

  const clickHandler = () => {
    const query = document.getElementById('search').value;
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
    .then(res => {
      const title = res.data['results'][0]['title'];
      setTitle(title);
    })

 }

    return (
        <div>
            <input type="search" id="search" />
            <button onClick={clickHandler}>submit</button>
            <h1 id="title">title</h1>
            <Movielist title={title} />
        </div>

    )
}

export default App